import CustomTable from "@/app/component/CustomTable"
import CircularLoading from "@/app/component/loading/Circular"
import CustomLoading from "@/app/component/loading/Custom"
import TextLoading from "@/app/component/loading/Text"
import Pagination from "@/app/component/Pagination"
import { TableCell, TableRow } from "@mui/material"
import Image from "next/image"

function List({ data }) {

    const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
    const centerTable = [0, 4];

    return (
        <div className="mt-[32px] pb-[20px] table-rounded-8">
            <CustomTable
                tableHead={tableHead}
                centerTable={centerTable}
            >
                {data.list_of_doctors_appointments.map((row, idx) => (
                    <TableRow
                        key={idx}
                        className='!border-0 !border-b !border-[#DBDBDB]'
                    >
                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="center">
                            <TextLoading width={15} height={18} loading={false}>
                                {idx + 1}
                            </TextLoading>
                        </TableCell>
                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' component="th" scope="row">
                            <div className='flex items-center justify-start gap-[8px] !text-nowrap'>
                                <CircularLoading width={32} height={32} loading={false}>
                                    <Image
                                        src={row.image}
                                        alt='doctor'
                                        height={32}
                                        width={32}
                                    />
                                </CircularLoading>
                                <TextLoading width={40} height={18} loading={false}>
                                    {row.name}
                                </TextLoading>
                            </div>
                        </TableCell>
                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="right">
                            <TextLoading width={50} height={18} loading={false}>
                                {row.expertise}
                            </TextLoading>
                        </TableCell>
                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="left">
                            <TextLoading width={50} height={18} loading={false}>
                                {row.date}
                            </TextLoading>
                        </TableCell>
                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !text-center !pr-[18px] !text-nowrap' align="right">
                            <TextLoading width={50} height={18} loading={false}>
                                {row.hour}
                            </TextLoading>
                        </TableCell>
                        <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="left">
                            <CustomLoading width={80} height={22} loading={false}>
                                {row.number_of_turns}
                            </CustomLoading>
                        </TableCell>
                    </TableRow>
                ))}
            </CustomTable>
            <div className="w-full flex justify-center mt-[48px]">
                <Pagination />
            </div>
        </div>
    )
}

export default List