import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import PageLoading from '../../components/PageLoading'
import Pagination from '../../components/Pagination'
import { useGetCategory } from './hooks/useLearningData'
import { CategoryLearningType } from './types/LearningTypes'
import CreateCategory from './components/CreateCategory'


const LearningCategory: FC = () => {

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

    return (
        <div className='mt-4'>
            <div>
                {t('service.cateory_services')}
            </div>

            <div className='flex gap-6 mt-8'>
                <div className='flex-1'>

                    <div className='flex-1 bg-white py-2 xl:px-10 px-5 rounded-3xl'>
                        {
                            getCategory.isPending ?
                                <div className='mt-4'>
                                    <PageLoading />
                                </div>
                                :
                                <div className='relative overflow-x-auto rounded-3xl w-full'>
                                    <table className='w-full text-sm '>
                                        <thead className='thead'>
                                            <tr>
                                                <Td text={t('service.title')} />
                                                <Td text={''} />
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {
                                                getCategory.data?.data?.categories?.map((item: CategoryLearningType) => {
                                                    return (
                                                        <tr key={item.id} className='tr'>
                                                            <Td text={item.name} />
                                                            <Td text={''} />
                                                        </tr>
                                                    )
                                                })
                                            }
                                        </tbody>
                                    </table>
                                    <div className='flex justify-end pb-3'>
                                        <Pagination
                                            currentPage={page}
                                            totalPages={getCategory.data?.data?.pager?.totalPages}
                                            onPageChange={setPage}
                                        />
                                    </div>
                                </div>
                        }


                    </div>
                </div>

                <CreateCategory />
            </div>
        </div>
    )
}

export default LearningCategory