import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import { ProfileCircle, UserTag } from 'iconsax-react'
import Legal from './components/Legal'
import Personal from './components/Personal'

const Financial: FC = () => {

    const { t } = useTranslation('global')
    const [activeTab, setActiveTab] = useState('legal')

    return (
        <div className='mt-4'>
            <div>
                {t('financial.financial')}
            </div>

            <div className='mt-8'>
                <Tabs
                    items={[
                        {
                            icon: <UserTag color={activeTab === 'legal' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('financial.legal'),
                            value: 'legal'
                        },
                        {
                            icon: <ProfileCircle color={activeTab === 'personal' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('financial.personal'),
                            value: 'personal'
                        },
                    ]}
                    active={activeTab}
                    onChange={setActiveTab}
                />
            </div>

            {
                activeTab === 'legal' ?
                    <Legal />
                    :
                    <Personal />
            }
        </div>
    )
}

export default Financial