import { FC } from 'react'
import { useGetGroups } from './hooks/useUserData'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { Add } from 'iconsax-react'
import Td from '../../components/Td'
import { GroupItemType } from './types/UserTypes'

const GroupList: FC = () => {

    const { t } = useTranslation('global')
    const navigate = useNavigate()
    const getGroups = useGetGroups()

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('user.groups')}
                </div>
                <div>
                    <Button
                        className='px-5'
                        onClick={() => navigate(Pages.users.groupList)}
                    >
                        <div className='flex gap-2'>
                            <Add
                                className='size-5'
                                color='#fff'
                            />
                            <div>{t('user.group_add')}</div>
                        </div>
                    </Button>
                </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.group_name')} />
                            <Td text={t('user.user')} />
                        </tr>
                    </thead>
                    <tbody>
                        {
                            getGroups.data?.data?.usersGroup?.map((item: GroupItemType) => {
                                return (
                                    <tr key={item.id} className='tr'>
                                        <Td text={item.name} />
                                        <Td text={''}>
                                            {item.users.map((user) => user.firstName + ' ' + user.lastName).join(', ')}
                                        </Td>
                                        {/* <Td text={''}>
                                            <Link to={Pages.ticket.detail + '1'}>
                                                <Eye size={20} color='#8C90A3' />
                                            </Link>
                                        </Td> */}
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default GroupList