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

function Pagination({ page, totalPages, onPageChange}) {
  const theme=useTheme()
  const isSmall=useMediaQuery(theme.breakpoints.down("sm"))
  const handleChange = (event, value) => {
    onPageChange(event, value); 
  };
    const count = totalPages||1


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

export default Pagination;