import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import { Calendar, CloseCircle, Eye, FolderOpen, MoneyChange, WalletCheck, WalletRemove, WalletSearch } from 'iconsax-react'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'

const ReceiptsList: FC = () => {

    const { t } = useTranslation('global')
    const [activeTab, setActiveTab] = useState<string>('unpaid')

    return (
        <div className='flex justify-center'>
            <div className='mt-4 w-full max-w-[1200px]'>
                <div>
                    {t('receip.Language_learners_list')}
                </div>

                <div className='mt-14'>
                    <Tabs
                        active={activeTab}
                        items={[
                            {
                                icon: <WalletRemove color={activeTab === 'unpaid' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('receip.dont_pay'),
                                value: 'unpaid'
                            },
                            {
                                icon: <WalletSearch color={activeTab === 'not_confimed' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('receip.dont_confrim'),
                                value: 'not_confimed'
                            },
                            {
                                icon: <WalletCheck color={activeTab === 'paid' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('receip.paid'),
                                value: 'paid'
                            },
                            {
                                icon: <CloseCircle color={activeTab === 'canceled' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('receip.canceled'),
                                value: 'canceled'
                            },
                            {
                                icon: <MoneyChange color={activeTab === 'returned' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('receip.returned'),
                                value: 'returned'
                            },
                            {
                                icon: <Calendar color={activeTab === 'time' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('receip.its_time'),
                                value: 'time'
                            },
                            {
                                icon: <FolderOpen color={activeTab === 'archive' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('receip.archive'),
                                value: 'archive'
                            },
                        ]}
                        onChange={setActiveTab}
                    />
                </div>

                <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                    <table className='w-full text-sm '>
                        <thead className='thead'>
                            <tr>
                                <Td text={t('ticket.number')} />
                                <Td text={t('ticket.title')} />
                                <Td text={t('ticket.team')} />
                                <Td text={t('ticket.date')} />
                                <Td text={t('ticket.status')} />
                                <Td text={t('ticket.priority')} />
                                <Td text={t('ticket.detail')} />
                                <Td text={''} />
                            </tr>
                        </thead>
                        <tbody>
                            <tr className='tr'>
                                <Td text={t('ticket.number')} />
                                <Td text={t('ticket.title')} />
                                <Td text={t('ticket.team')} />
                                <Td text={t('ticket.date')} />
                                <Td text={t('ticket.status')} />
                                <Td text={t('ticket.priority')} />
                                <Td text={t('ticket.detail')} />
                                <Td text={''}>
                                    <Link to={Pages.receipts.detail + '1'}>
                                        <Eye size={20} color='black' />
                                    </Link>
                                </Td>
                            </tr>
                            <tr className='tr'>
                                <Td text={t('ticket.number')} />
                                <Td text={t('ticket.title')} />
                                <Td text={t('ticket.team')} />
                                <Td text={t('ticket.date')} />
                                <Td text={t('ticket.status')} />
                                <Td text={t('ticket.priority')} />
                                <Td text={t('ticket.detail')} />
                                <Td text={''} />
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    )
}

export default ReceiptsList