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

function Table({ data, loading }) {
  const tableHead = ["ردیف", "نام پزشک", "تخصص", "تاریخ", "ساعت", "تعدد نوبت"];
  const centerTable = [0, 4];

  return (
    <div className="hidden md:flex">
      <CustomTable
        zeroRadius={true}
        tableHead={tableHead}
        centerTable={centerTable}
      >
        {data.list_of_doctors_appointments.map((row, idx) => (
          <TableRow
            key={idx}
            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
          >
            <TableCell
              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
              align="center"
            >
              <TextLoading width={15} height={18} loading={loading}>
                {idx + 1}
              </TextLoading>
            </TableCell>
            <TableCell
              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
              component="th"
              scope="row"
            >
              <div className="flex items-center justify-start gap-[8px] !text-nowrap">
                <CircularLoading width={32} height={32} loading={loading}>
                  <Image src={row.image} alt="doctor" height={32} width={32} />
                </CircularLoading>
                <TextLoading width={40} height={18} loading={loading}>
                  {row.name}
                </TextLoading>
              </div>
            </TableCell>
            <TableCell
              className="!text-start dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
              align="right"
            >
              <TextLoading width={30} height={18} loading={loading}>
                {row.expertise}
              </TextLoading>
            </TableCell>
            <TableCell
              className="!text-start dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
              align="right"
            >
              <TextLoading width={50} height={18} loading={loading}>
                {row.date}
              </TextLoading>
            </TableCell>
            <TableCell
              className="!text-center dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
              align="right"
            >
              <TextLoading width={50} height={18} loading={loading}>
                {row.hour}
              </TextLoading>
            </TableCell>
            <TableCell
              className="!text-right dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
              align="right"
            >
              <TextLoading width={50} height={18} loading={loading}>
                {row.number_of_turns}
              </TextLoading>
            </TableCell>
          </TableRow>
        ))}
      </CustomTable>
    </div>
  );
}

export default Table;