import CustomTable from "@/app/component/CustomTable";
import ArrowLeftBlueD from "@/components/icons/ArrowLeftBlueD";
import { Button, TableCell, TableRow } from "@mui/material";
import Image from "next/image";
import Card from "./Card";
import CircularLoading from "@/app/component/loading/Circular";
import TextLoading from "@/app/component/loading/Text";
import CustomLoading from "@/app/component/loading/Custom";

function List({ user, loading, setIsTurnsDetails }) {
  const tableHead = [
    "ردیف",
    "نام پزشک",
    "تخصص",
    "تاریخ",
    "ساعت",
    "مبلغ (تومان)",
    "عملیات",
  ];
  const centerTable = [0, 5];

  return (
    <div className="!mt-[24px]">
      <div className="hidden lg:block">
        <CustomTable tableHead={tableHead} centerTable={centerTable}>
          {user.map((row, idx) => (
            <TableRow
              key={idx}
              className="!border-0 !border-b !border-[#DBDBDB]"
            >
              <TableCell className="!pr-[18px] !text-nowrap" align="center">
                <TextLoading width={15} height={18} loading={loading}>
                  {idx + 1}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!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={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 !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  {row.expertise}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  {row.date}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-center !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  {row.time}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-center !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  {row.amount}
                </TextLoading>
              </TableCell>
              <TableCell className="!pr-[18px] !text-nowrap" align="right">
                <CustomLoading width={80} height={22} loading={loading}>
                  <Button
                    className="!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]"
                    onClick={() => setIsTurnsDetails(true)}
                    variant="text"
                  >
                    مشاهده جزئیات
                    <ArrowLeftBlueD />
                  </Button>
                </CustomLoading>
              </TableCell>
            </TableRow>
          ))}
        </CustomTable>
      </div>
      <ul className="flex flex-col lg:hidden gap-[24px]">
        {user.map((item, idx) => (
          <Card
            key={idx}
            data={item}
            loading={loading}
            setIsTurnsDetails={setIsTurnsDetails}
          />
        ))}
      </ul>
    </div>
  );
}

export default List;