Pagination — Server-side

"use client";

import { useState } from "react";
import { ProductList } from "@/components/products/product-list";
import { ProductPagination } from "@/components/products/product-pagination";

export default function ProductsPage() {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  return (
    <main>
      <ProductList params={{ page, pageSize }} />
      <ProductPagination
        page={page}
        pageSize={pageSize}
        onPageChange={setPage}
        onPageSizeChange={(size) => {
          setPageSize(size);
          setPage(1);   // size বদলালে ১ম পেজে
        }}
      />
    </main>
  );
}

"use client";

import { Button } from "@/components/ui/button";
import { useProducts } from "@/lib/hooks/use-products";

export function ProductPagination({ page, pageSize, onPageChange }) {
  // totalPages জানতে একই query-র total-needed
  const { data } = useProducts({ page, pageSize });

  const totalPages = data?.totalPages ?? 1;

  return (
    <div className="flex items-center justify-between">
      <span className="text-sm text-muted-foreground">
        {data ? `মোট ${data.total}টি product` : "..."}
      </span>
      <div className="flex gap-2">
        <Button
          variant="outline"
          disabled={page <= 1}
          onClick={() => onPageChange(page - 1)}
        >
          আগের
        </Button>
        <span className="px-2 text-sm">
          {page} / {totalPages}
        </span>
        <Button
          variant="outline"
          disabled={page >= totalPages}
          onClick={() => onPageChange(page + 1)}
        >
          পরের
        </Button>
      </div>
    </div>
  );
}