import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
} from "@mui/material";

function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
  return (
    <TableContainer
      className="!shadow-none dark:!border-[#35343D] table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
      sx={{
        "&.MuiTableContainer-root": {
          borderRadius: zeroRadius && "0 !important",
        },
      }}
    >
      <Table className="!rounded-0 !shadow-none !overflow-hidden">
        <TableHead>
          <TableRow className="!bg-[#EFEFEF] dark:!bg-[#343645]">
            {tableHead.map((item, idx) => (
              <TableCell
                key={idx}
                className={`
                  !text-[#616161] dark:!border-none dark:!text-[#D7D8ED] !text-[14px] !font-normal !py-[10px] !px-[18px]
                  ${centerTable.includes(idx) ? "!text-center" : "!text-start"}
                `}
              >
                {item}
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>{children}</TableBody>
      </Table>
    </TableContainer>
  );
}

export default CustomTable;