import { useState } from "react";
import OtherHeader, { NavListProps } from "../../components/OtherHeader";
import useScrollToTop from "../../Hook/useScrollToTop";
import { useJs } from "../../assets/html";


const navList = [
    {
        label: '道具装备',
        value: 'propEquipment',
        children: [
            { label: '神兵', value: 'sb' },
            { label: '包裹和仓库', value: 'bgck' },
        ]
    },
    {
        label: '技能相关',
        value: 'skill',
        children: [
            { label: '帮派技能', value: 'bpjn' },
            { label: '灵宠技能', value: 'lqjn' },
            { label: '门派技能', value: 'mpjn' },
        ]
    },
]

/**
 * 常用信息
 * @returns 
 */
const CommonInformation: React.FC = () => {

    useScrollToTop();

    /*****************************************/
    const [navInfo, setNavInfo] = useState<{ nav: string, fatherNav: NavListProps }>()
    /*****************************************/

    return <div className="gameIntroduction">
        <OtherHeader
            title='常用信息'
            navList={navList}
            onChange={(nav, fatherNav) => {
                setNavInfo({ nav, fatherNav })
            }}
        >
            {(navInfo?.nav && navInfo?.fatherNav?.value) && <div className='article-box' dangerouslySetInnerHTML={{ __html: useJs?.[navInfo?.fatherNav?.value]?.[navInfo?.nav] }} />}
        </OtherHeader>
    </div>
}

export default CommonInformation