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

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

  return (
    <div className="!mt-[32px]">
      <div className="hidden md:block w-full">
        <CustomTable tableHead={tableHead} centerTable={centerTable}>
          {data.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="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={30} height={18} loading={loading}>
                  {row.card_number}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={30} height={18} loading={loading}>
                  {row.shaba_number}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={30} height={18} loading={loading}>
                  {row.bank}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={30} height={18} loading={loading}>
                  {row.status ? "فعال" : "غیر فعال"}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  <Switch />
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-center !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  <div className="flex items-center justify-center gap-[4px]">
                    <Button className="!min-w-fit !p-1" variant="text">
                      <TrashB />
                    </Button>
                    <Button className="!min-w-fit !p-1" variant="text">
                      <EditB />
                    </Button>
                  </div>
                </TextLoading>
              </TableCell>
            </TableRow>
          ))}
        </CustomTable>
      </div>
    </div>
  );
}

export default List;