import { FC, useState } 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 { useGetLearning } from './hooks/useLearningData'
import PageLoading from '../../components/PageLoading'
import Td from '../../components/Td'
import { LearningItemType } from './types/LearningTypes'
import Pagination from '../../components/Pagination'
const LearningList: FC = () => {

    const { t } = useTranslation('global')
    const [page, setPage] = useState<number>(1)
    const getLearning = useGetLearning(page)

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('learning.list_learning')}
                </div>
                <div>
                    <Link to={Pages.learning.create}>
                        <Button
                            className='px-5'
                        >
                            <div className='flex gap-2'>
                                <Add
                                    className='size-5'
                                    color='#fff'
                                />
                                <div>{t('learning.submit_learning')}</div>
                            </div>
                        </Button>
                    </Link>
                </div>
            </div>

            {
                getLearning.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='' />
                                    <Td text={t('learning.title')} />
                                    <Td text={t('learning.category')} />
                                    <Td text={t('learning.video_duration')} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getLearning.data?.data?.learnings?.map((item: LearningItemType) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={''}>
                                                    <img src={item.coverUrl} className='w-20' />
                                                </Td>
                                                <Td text={item.title} />
                                                <Td text={item.category?.name} />
                                                <Td text={item.videoDuration} />
                                            </tr>
                                        )
                                    })
                                }

                            </tbody>
                        </table>
                    </div>
            }

            <Pagination
                currentPage={page}
                onPageChange={setPage}
                totalPages={getLearning.data?.data?.pager?.totalPages}
            />
        </div>
    )
}

export default LearningList