import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import Select from '../../components/Select'
import Input from '../../components/Input'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'

const UsersList: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('user.users_list')}
                </div>
                <div>
                    <Button
                        className='px-5'
                    >
                        <div className='flex gap-2'>
                            <Add
                                className='size-5'
                                color='#fff'
                            />
                            <div>{t('user.add_user')}</div>
                        </div>
                    </Button>
                </div>
            </div>

            <div className='flex justify-between items-center mt-12'>
                <div className='flex gap-4'>
                    <Select
                        className='w-36'
                        items={[
                            { label: 'All', value: 'all' },
                            { label: 'Active', value: 'active' },
                            { label: 'Inactive', value: 'inactive' },
                        ]}
                        placeholder={t('service.category')}
                    />
                </div>
                <div>
                    <Input
                        variant='search'
                        placeholder={t('service.search')}
                        className='bg-white border border-border'
                    />
                </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('user.name')} />
                            <Td text={t('user.title_job')} />
                            <Td text={t('user.email')} />
                            <Td text={t('user.role')} />
                            <Td text={t('detail')} />
                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
                        <tr className='tr'>
                            <Td text='مهرداد مظفری' />
                            <Td text={'کارشناس فنی'} />
                            <Td text={'info@example.com'} />
                            <Td text={'سطح ۱'} />
                            <Td text={''}>
                                <Link to={Pages.ticket.detail + '1'}>
                                    <Eye size={20} color='#8C90A3' />
                                </Link>
                            </Td>
                            <Td text={''} />
                        </tr>
                        <tr className='tr'>
                            <Td text='مهرداد مظفری' />
                            <Td text={'کارشناس فنی'} />
                            <Td text={'info@example.com'} />
                            <Td text={'سطح ۱'} />
                            <Td text={''}>
                                <Link to={Pages.ticket.detail + '1'}>
                                    <Eye size={20} color='#8C90A3' />
                                </Link>
                            </Td>
                            <Td text={''} />
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default UsersList