paginations ,limit=50

app/clinic/[slug]/page.js

@@ -8,17 +8,19 @@ async function Clinic({ params: { slug } }) {
   const reqClinics = await fetchReq(
     `${API_URL}/api/v1/clinic/${slug}`
   );
-
+const limit=50 
   const reqDoctors = await fetchReq(
-    `${API_URL}/api/v1/clinic/doctor-list/${slug}`
+    `${API_URL}/api/v1/clinic/doctor-list/${slug}?page=1&limit=${limit}`
   );
 
+
   const clinic = reqClinics;
   const doctors = reqDoctors?.data || [];
+  const pagedoctors=reqDoctors?.page
 
   return (
     <Layout>
-      <ClinicPage data={clinic} doctors={doctors} slug={slug}  />
+      <ClinicPage data={clinic} doctors={doctors} slug={slug} pages={pagedoctors} />
     </Layout>
   );
 }

app/component/Pagination.js

@@ -1,27 +1,30 @@
-import { Pagination as PaginationMUI } from "@mui/material";
+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
 
-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}
+      onChange={handleChange}
       color="primary"
-      className={count < 2 && "!hidden"}
+      size={isSmall ? "small" : "medium"}
       sx={{
-        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
+        "& .MuiPaginationItem-root": {
           color: "#616161",
           fontSize: "16px",
           fontWeight: "500",
         },
-        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
-          {
-            color: "#F8F8FF",
-          },
+        "& .MuiPaginationItem-root.Mui-selected": {
+          color: "#F8F8FF",
+        },
         "& .MuiSvgIcon-root": {
           rotate: "180deg !important",
         },