import { type FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import Button from '../../components/Button'
import { Add } from 'iconsax-react'
import { useGetResellers } from './hooks/useResellerData'
import PageLoading from '../../components/PageLoading'
import Td from '../../components/Td'
import { ResellerItemType } from './types/Types'

const ResellerList: FC = () => {

    const { t } = useTranslation('global')
    const getReseller = useGetResellers()

    return (
        <div className='mt-4 min-h-[500px]'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('reseller.list')}
                </div>

                <Link to={Pages.discount.create}>
                    <Button
                        className='w-[172px]'
                    >
                        <div className='flex gap-2 items-center'>
                            <Add size={20} color='white' />
                            <div>
                                {t('reseller.add_new')}
                            </div>
                        </div>
                    </Button>
                </Link>
            </div>

            {
                getReseller.isPending ?
                    <PageLoading />
                    :
                    <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('reseller.name')} />
                                    <Td text={t('reseller.user')} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getReseller?.data?.data?.map((item: ResellerItemType) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={item.name} />
                                                <Td text={item?.owner?.firstName + ' ' + item.owner?.lastName} />
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
            }

        </div>
    )
}

export default ResellerList