import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import Select from '../../components/Select'
import Input from '../../components/Input'
import Button from '../../components/Button'
import { DocumentDownload } from 'iconsax-react'
const Records: FC = () => {
    const { t } = useTranslation('global')
    return (
        <div className='mt-4 min-h-[500px]'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('certificate.allSertificates')}
                </div>
            </div>
            <div>
                <div className='flex justify-between items-end gap-2 xl:items-end'>
                    <div className='mt-6 xl:mt-0 max-w-[420px] xl:w-[300px] w-full'>
                        <Input
                            variant='search'
                            placeholder={t('certificate.search')}
                            className='bg-white w-full'
                        />
                    </div>
                    <div className='flex items-center gap-4'>
                        <div className='w-[100px] xl:w-[200px]'>
                            <Select
                                items={[
                                    {
                                        label: 'همه',
                                        value: 'active'
                                    }
                                ]}
                                className='bg-white border'
                            />
                        </div>
                    </div>
                </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('grade-records.title')} />
                            <Td text={t('grade-records.status')} />
                            <Td text=''>
                                <div className='max-w-[200px] flex justify-center'>
                                    {t('certificate.certificate')}
                                </div>
                            </Td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr className='tr'>
                            <Td text={t('grade-records.title')} />
                            <Td text=''>
                                <div className='flex gap-1 !items-center'>
                                    <div className='w-2 h-2 rounded-full bg-green-600'></div>
                                    <div>{t('grade-records.status')}</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('grade-records.title')} />
                            <Td text=''>
                                <div className='flex gap-1 !items-center'>
                                    <div className='w-2 h-2 rounded-full bg-yellow-600'></div>
                                    <div>{t('grade-records.status')}</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 Records