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

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: <KeySquare color={activeTab === SettingTabEnum.PASSWORD ? 'black' : '#8C90A3'} size={24} />,
                            label: 'رمز عبور',
                            value: SettingTabEnum.PASSWORD,
                        },
                        {
                            icon: <Card color={activeTab === SettingTabEnum.FINANCIAL ? 'black' : '#8C90A3'} size={24} />,
                            label: 'مالی',
                            value: SettingTabEnum.FINANCIAL,
                        },
                        {
                            icon: <TruckFast color={activeTab === SettingTabEnum.DELIVERY ? 'black' : '#8C90A3'} size={24} />,
                            label: 'روش های ارسال',
                            value: SettingTabEnum.DELIVERY,
                        },
                    ]}
                    onChange={(value: string) => setActiveTab(value as SettingTabEnum)}
                    active={activeTab}
                />
            </div>

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

export default Setting