import CustomTable from "@/app/component/CustomTable";
import { Button, TableCell, TableRow } from "@mui/material";
import TextLoading from "@/app/component/loading/Text";
import TrashB from "@/components/icons/TrashB";
import EditB from "@/components/icons/EditB";
import SwitchTable from "@/app/component/SwitchTable";

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

  return (
    <div className="!mt-[40px] hidden md:block">
      <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] !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !text-nowrap"
                align="center"
              >
                <TextLoading width={15} height={18} loading={loading}>
                  {idx + 1}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  {row.card_number}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={80} height={18} loading={loading}>
                  {row.shaba_number}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={30} height={18} loading={loading}>
                  {row.bank}
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !pr-[18px] !text-nowrap"
                align="right"
              >
                <TextLoading width={50} height={18} loading={loading}>
                  <div className="flex items-center justify-start gap-[16px]">
                    <p className="text-[16px] min-w-[60px] dark:text-[#A1A1A1] font-medium text-[#616161]">
                      {row.status ? "فعال" : "غیر فعال"}
                    </p>
                    <SwitchTable
                      id={row.id}
                      value={row.status}
                      changeStatus={changeStatus}
                    />
                  </div>
                </TextLoading>
              </TableCell>
              <TableCell
                className="!text-center !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !pr-[18px] !text-nowrap"
                align="right"
              >
                <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>
              </TableCell>
            </TableRow>
          ))}
        </CustomTable>
      </div>
    </div>
  );
}

export default List;