import { Pagination, useMediaQuery, useTheme } from "@mui/material";

function PaginationContent({ page, pageDetail, changePage, limit = 12 }) {
  const theme = useTheme();
  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));

  const count = Math.ceil(pageDetail.totalRecords / limit);

  return (
    <Pagination
      count={count}
      page={page || 1}
      size={isSmall ? "small" : "medium"}
      onChange={changePage}
      color="primary"
      className={(!count || count < 2) && "!hidden"}
      sx={{
        "& .MuiPaginationItem-root": {
          color: "#616161",
          fontSize: "16px",
          fontWeight: "500",
        },
        "& .MuiPaginationItem-root.Mui-selected": {
          color: "#F8F8FF",
        },
        "& .MuiSvgIcon-root": {
          rotate: "180deg !important",
        },
      }}
    />
  );
}

export default PaginationContent;