import { useEffect, useState } from 'react';
import './welcome.less';
import avatarSrc from '@/assets/public/logo.png';
import logoSrc from '@/assets/public/logo.png';
import { nanoid } from "nanoid";
import store from './store';
import { RightOutlined } from "@ant-design/icons";

interface Props {
    infoDetail: {
        questionlist: string[],
        detail: {
            name: string,
            desc: string,
        },
    };
    handleUserSubmit: (input: string,infoDetail: any) => void;
    saveConfig: () => Promise<any>
}

const Welcome: React.FC<Props> = (props) => {
    const { infoDetail: { detail, questionlist }, handleUserSubmit, saveConfig } = props;
    const { state, fetchPresetsApi } = store();
    useEffect(() => {

    }, []);


    return (
        <div className='welcome-container'>
            <div className='title'>
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <img style={{ width: 50, height: 50 }} src={avatarSrc} />
                </div>
                <h3 style={{ textAlign: 'center' }}>
                    {/* {getAppName()} */}
                    {detail?.name}
                </h3>
                <p style={{ textAlign: 'center' }} className='px-10'>
                    {/* {getDesc()} */}
                    {detail?.desc}
                </p>

                <div className='flex items-center justify-center flex-col mt-18 w-full px-4'>
                    <p className='pb-[20px]'>我猜您可能想问:</p>
                    {
                        questionlist?.map((item: any, index: any) => {
                            return (
                                <div
                                    className='w-[300px]'
                                    style={{
                                        padding: '10px',
                                        marginBottom: '10px',
                                        border: '1px solid #e6e8f1',
                                        borderRadius: '10px',
                                        fontSize: '13px',
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        alignItems: 'center',
                                        cursor: 'pointer'
                                    }}
                                    onClick={async () => {
                                        const result = await saveConfig();
                                        if (result) {
                                            handleUserSubmit(item.question, result);
                                        }
                                    }}
                                    key={item.id}
                                >
                                    <div>
                                        {item.question}
                                    </div>
                                    <RightOutlined />
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}

export default Welcome;