import Tabs from '@/components/Tabs'
import { Money2, Setting4 } from 'iconsax-react'
import { useState, type FC } from 'react'
import { SettingTabEnum } from './enum/Enum'
import GeneralSettings from './GeneralSettings'
import ScoreSetting from './components/ScoreSetting'

const Setting: FC = () => {

    const [activeTab, setActiveTab] = useState<SettingTabEnum>(SettingTabEnum.GENERAL)

    return (
        <div className='mt-5'>
            <h1 className='text-lg font-light'>تنظیمات</h1>

            <div className='mt-8'>
                <Tabs
                    items={[
                        {
                            icon: <Setting4 color={activeTab === SettingTabEnum.GENERAL ? 'black' : '#8C90A3'} size={24} />,
                            label: 'عمومی',
                            value: SettingTabEnum.GENERAL,
                        },
                        {
                            icon: <Money2 color={activeTab === SettingTabEnum.FINANCIAL ? 'black' : '#8C90A3'} size={24} />,
                            label: 'تنظیمات امتیاز',
                            value: SettingTabEnum.FINANCIAL,
                        },
                    ]}
                    onChange={(value: string) => setActiveTab(value as SettingTabEnum)}
                    active={activeTab}
                />
            </div>

            <div className='mt-8'>
                {
                    activeTab === SettingTabEnum.GENERAL && <GeneralSettings />
                }
                {
                    activeTab === SettingTabEnum.FINANCIAL && <ScoreSetting />
                }
            </div>
        </div>
    )
}

export default Setting