sexy/components/shared/PageNav.tsx

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";

interface PageNavProps {
  basePath: string;
  page: number;
  pageSize: number;
  total: number;
}

export function PageNav({ basePath, page, pageSize, total }: PageNavProps) {
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  if (totalPages <= 1) return null;

  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
  const to = Math.min(page * pageSize, total);

  return (
    <div className="flex items-center justify-between gap-4 pt-2">
      <span className="bp-readout text-xs text-muted-foreground">
        {from}-{to} of {total}
      </span>
      <div className="flex items-center gap-2">
        {page > 1 ? (
          <Button asChild variant="outline" size="icon-sm">
            <Link href={`${basePath}?page=${page - 1}`} aria-label="Previous page">
              <ChevronLeft className="size-3.5" />
            </Link>
          </Button>
        ) : (
          <Button variant="outline" size="icon-sm" disabled aria-label="Previous page">
            <ChevronLeft className="size-3.5" />
          </Button>
        )}
        <span className="bp-readout text-xs text-muted-foreground">
          {page} / {totalPages}
        </span>
        {page < totalPages ? (
          <Button asChild variant="outline" size="icon-sm">
            <Link href={`${basePath}?page=${page + 1}`} aria-label="Next page">
              <ChevronRight className="size-3.5" />
            </Link>
          </Button>
        ) : (
          <Button variant="outline" size="icon-sm" disabled aria-label="Next page">
            <ChevronRight className="size-3.5" />
          </Button>
        )}
      </div>
    </div>
  );
}