import { type FC, useState } from 'react'
// import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { Paths } from '../../config/Paths'
import Button from '../../components/Button'
import { Add } from 'iconsax-react'
import { useGetLearning } from './hooks/useLearningData'
import { type LearningItemType } from './hooks/useLearningData'
import Table from '../../components/Table'
import { type ColumnType } from '../../components/types/TableTypes'
const LearningList: FC = () => {
    const [page, setPage] = useState<number>(1)
    const getLearning = useGetLearning(page)

    // تعریف ستون‌های جدول
    const columns: ColumnType<LearningItemType>[] = [
        {
            title: '',
            key: 'coverUrl',
            width: '100px',
            render: (item: LearningItemType) => (
                <img src={item.coverUrl} className='w-20 h-12 object-cover rounded' alt={item.title} />
            )
        },
        {
            title: 'عنوان',
            key: 'title',
            render: (item: LearningItemType) => (
                <span className='font-medium'>{item.title}</span>
            )
        },
        {
            title: 'دسته‌بندی',
            key: 'category',
            render: (item: LearningItemType) => (
                <span>{item.category?.name}</span>
            )
        },
        {
            title: 'مدت زمان ویدیو',
            key: 'videoDuration',
            render: (item: LearningItemType) => (
                <span className='text-gray-600'>{item.videoDuration}</span>
            )
        }
    ]

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    لیست آموزش‌ها
                </div>
                <div>
                    <Link to={Paths.learning.create}>
                        <Button
                            className='px-5'
                        >
                            <div className='flex gap-2'>
                                <Add
                                    className='size-5'
                                    color='black'
                                />
                                <div>ثبت آموزش</div>
                            </div>
                        </Button>
                    </Link>
                </div>
            </div>

            <Table<LearningItemType>
                columns={columns}
                data={getLearning.data?.data?.learnings}
                isLoading={getLearning.isPending}
                pagination={{
                    currentPage: page,
                    totalPages: getLearning.data?.data?.pager?.totalPages || 1,
                    onPageChange: setPage
                }}
                noDataMessage="هیچ آموزشی یافت نشد"
            />
        </div>
    )
}

export default LearningList