import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Select from '../../components/Select'
import Td from '../../components/Td'
import StatusCircle from '../../components/StatusCircle'
import Button from '../../components/Button'
import { DocumentDownload } from 'iconsax-react'

const ReportCardList: FC = () => {

    const { t } = useTranslation('global')

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

            <div className='mt-2 flex gap-4 items-center'>
                <Input
                    variant='search'
                    placeholder={t('reportCard.search')}
                    className='bg-white'
                />

                <div className='w-[150px]'>
                    <Select
                        items={[
                            { value: '1', label: t('all') },
                        ]}
                        className='bg-white'
                    />
                </div>
            </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('reportCard.title_course')} />
                            <Td text={t('status')} />
                            <Td text={t('reportCard.reportCard')} />
                        </tr>
                    </thead>
                    <tbody>
                        <tr className='tr'>
                            <Td text={t('reportCard.title_course')} />
                            <Td text=''>
                                <div className='flex gap-1.5 items-center'>
                                    <StatusCircle color='red' />
                                    <div className='text-[11px]'>ثبت نشده</div>
                                </div>
                            </Td>
                            <Td text={''}>
                                <Button
                                    className='h-7 rounded-lg w-fit px-6'
                                >
                                    <div className='flex gap-2 items-center'>
                                        <DocumentDownload size={16} color='white' />
                                        <div className='text-xs mt-0.5'>{t('download')}</div>
                                    </div>
                                </Button>
                            </Td>
                        </tr>
                        <tr className='tr'>
                            <Td text={t('reportCard.title_course')} />
                            <Td text=''>
                                <div className='flex gap-1.5 items-center'>
                                    <StatusCircle color='red' />
                                    <div className='text-[11px]'>ثبت نشده</div>
                                </div>
                            </Td>
                            <Td text={''}>
                                <Button
                                    disabled
                                    className='h-7 rounded-lg w-fit px-6'
                                >
                                    <div className='flex gap-2 items-center'>
                                        <DocumentDownload size={16} color='white' />
                                        <div className='text-xs mt-0.5'>{t('download')}</div>
                                    </div>
                                </Button>
                            </Td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default ReportCardList