import CustomTable from "@/app/component/CustomTable";
import CircularLoading from "@/app/component/loading/Circular";
import TextLoading from "@/app/component/loading/Text";
import { TableCell, TableRow } from "@mui/material";

function Disease({ data }) {
  const tableHead = ["شماره", "اسم", "وضعیت"];
  const centerTable = [0, 4];

  return (
    <div className="hidden md:flex">
      <CustomTable
        zeroRadius={true}
        tableHead={tableHead}
        centerTable={centerTable}
      >
        {data.map((row, idx) => (
          <TableRow
            key={idx}
            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
          >
            <TableCell
              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
              align="center"
            >
              <TextLoading width={15} height={18} loading={false}>
                {idx + 1}
              </TextLoading>
            </TableCell>
            <TableCell
              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
              align="center"
            >
              <TextLoading width={15} height={18} loading={false}>
                {row.name}
              </TextLoading>
            </TableCell>
            <TableCell
              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
              align="center"
            >
              <TextLoading width={15} height={18} loading={false}>
                {row.status}
              </TextLoading>
            </TableCell>
          </TableRow>
        ))}
      </CustomTable>
    </div>
  );
}

export default Disease;