import { type FC } from 'react'
import PageTitle from '@/components/PageTitle'
import { useGetThemes } from './hooks/useThemeData'
import Button from '@/components/Button';
import { Link } from 'react-router-dom';
import { Pages } from '@/config/Pages';
import { Plus } from 'lucide-react';
import Td from '@/components/Td';
import TrashWithConfrim from '@/components/TrashWithConfrim';
import { Eye } from 'iconsax-react';

const ThemeList: FC = () => {

    const { data, isLoading } = useGetThemes();

    if (isLoading) {
        return <div className="flex justify-center items-center h-64">در حال بارگذاری...</div>;
    }

    return (
        <div>
            <PageTitle title1='تم ها' />

            <div className='mt-5 flex justify-end'>
                <Link to={Pages.products.theme.create}>
                    <Button
                        className='w-fit px-4 flex gap-2'
                    >
                        <Plus color='#fff' size={16} />
                        <span>افزودن تم</span>
                    </Button>
                </Link>
            </div>

            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
                <table className='w-full text-sm '>
                    <thead className='thead'>
                        <tr>
                            <Td text={'عنوان'} />
                            <Td text={'نوع ورودی'} />
                            <Td text={'عملیات'} />
                        </tr>
                    </thead>
                    <tbody>
                        {
                            data?.results?.data?.map((item) => {
                                return (
                                    <tr className='tr' key={item._id}>
                                        <Td text={item.title} />
                                        <Td text={item.inputType} />
                                        <Td text=''>
                                            <div className='flex gap-2'>
                                                <Link to={`${Pages.products.theme.update}${item._id}`}>
                                                    <Eye size={16} color='#8C90A3' />
                                                </Link>
                                                <TrashWithConfrim
                                                    onDelete={() => null}
                                                    isLoading={false}
                                                />
                                            </div>
                                        </Td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default ThemeList