import { Pagination as PaginationMUI } from "@mui/material";

function Pagination({ page, setPage, list, itemsPerPage }) {
  const handleChange = (_, value) => setPage(value);
  const count =
    list && itemsPerPage ? Math.ceil(list.length / itemsPerPage) : 20;

  return (
    <PaginationMUI
      count={count}
      page={page || 1}
      onChange={setPage && handleChange}
      color="primary"
      className={count < 2 && "!hidden"}
      sx={{
        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
          color: "#616161",
          fontSize: "16px",
          fontWeight: "500",
        },
        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
          {
            color: "#F8F8FF",
          },
        "& .MuiSvgIcon-root": {
          rotate: "180deg !important",
        },
      }}
    />
  );
}

export default Pagination;