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

function List({ user, 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}>
          {user.turns.done.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.id}
                </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.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}>
                  <div
                    className={`
                      w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium select-none
                      ${
                        row.status === "success"
                          ? "bg-[#E8FADD] text-[#75E22E]"
                          : row.status === "pending"
                          ? "bg-[#FFF3DD] text-[#FDBA35]"
                          : "bg-[#FFE3E2] text-[#FF5450]"
                      }
                    `}
                    variant="text"
                  >
                    {row.status === "success"
                      ? "پرداخت شده"
                      : row.status === "pending"
                      ? "در انتظار"
                      : "پرداخت نشده"}
                  </div>
                </CustomLoading>
              </TableCell>
            </TableRow>
          ))}
        </CustomTable>
      </div>
      <ul className="flex md:hidden flex-col gap-y-[24px]">
        {user.turns.done.map((row, idx) => (
          <Card key={idx} data={row} loading={loading} />
        ))}
      </ul>
    </div>
  );
}

export default List;