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

function Item({ data, loading, changeStatus }) {
  return (
    <li className="rounded-[8px] bg-[#FFF] p-[12px] dark:shadow-transparent dark:bg-[#222433] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
      <div className="w-full flex items-center justify-between">
        <div className="flex items-center justify-start gap-[4px]">
          <TextLoading width={50} height={18} loading={loading}>
            <div className="flex items-center justify-start gap-[16px]">
              <p className="text-[16px] min-w-[60px] font-medium text-[#616161] dark:text-[#A1A1A1]">
                {data.status ? "فعال" : "غیر فعال"}
              </p>
              <SwitchTable
                id={data.id}
                value={data.status}
                changeStatus={changeStatus}
              />
            </div>
          </TextLoading>
        </div>
        <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>
      </div>
      <ul className="flex flex-col mt-[16px]">
        <li className="flex items-center justify-between gap-[12px]">
          <TextLoading loading={loading} width={60} height={18}>
            <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
              شماره کارت:
            </p>
          </TextLoading>
          <TextLoading loading={loading} width={90} height={18}>
            <p className="text-[#616161] text-[12px] font-medium dark:text-[#A1A1A1]">
              {data.card_number}
            </p>
          </TextLoading>
        </li>
        <span className="block h-px w-[calc(100%-20px)] dark:bg-[#343645] mx-auto bg-[#EFEFEF] my-[8px]"></span>
        <li className="flex items-center justify-between gap-[12px]">
          <TextLoading loading={loading} width={60} height={18}>
            <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
              شماره شبا:
            </p>
          </TextLoading>
          <TextLoading loading={loading} width={90} height={18}>
            <p className="text-[#616161] text-[12px] font-medium dark:text-[#A1A1A1]">
              {data.shaba_number}
            </p>
          </TextLoading>
        </li>
        <span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px] dark:bg-[#343645]"></span>
        <li className="flex items-center justify-between gap-[12px]">
          <TextLoading loading={loading} width={60} height={18}>
            <p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
              بانک:
            </p>
          </TextLoading>
          <TextLoading loading={loading} width={90} height={18}>
            <p className="text-[#616161] text-[12px] font-medium dark:text-[#A1A1A1]">
              {data.bank}
            </p>
          </TextLoading>
        </li>
      </ul>
    </li>
  );
}

export default Item;