Pagination

"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import { motion } from "motion/react";
import * as React from "react";
import { cn } from "@/lib/utils";

export interface PaginationProps {
  page: number;
  pageCount: number;
  onPageChange: (page: number) => void;
  /** Pages shown on each side of the current one. */
  siblings?: number;
  className?: string;
}

function range(page: number, count: number, siblings: number): (number | "…")[] {
  const total = siblings * 2 + 5;
  if (count <= total) return Array.from({ length: count }, (_, i) => i + 1);
  const left = Math.max(page - siblings, 2);
  const right = Math.min(page + siblings, count - 1);
  return [1, ...(left > 2 ? ["…" as const] : []), ...Array.from({ length: right - left + 1 }, (_, i) => left + i), ...(right < count - 1 ? ["…" as const] : []), count];
}

export function Pagination({ page, pageCount, onPageChange, siblings = 1, className }: PaginationProps) {
  const id = React.useId();
  const btn = "grid h-8 min-w-8 place-items-center rounded-md px-2 text-sm tabular-nums transition-colors disabled:pointer-events-none disabled:opacity-40";
  return (
    <nav aria-label="Pagination" className={cn("flex items-center gap-1", className)}>
      <button type="button" aria-label="Previous page" disabled={page <= 1} onClick={() => onPageChange(page - 1)} className={cn(btn, "hover:bg-accent")}>
        <ChevronLeft className="size-4" />
      </button>
      {range(page, pageCount, siblings).map((p, i) =>
        p === "…" ? (
          <span key={`e${i}`} className="px-1 text-sm text-muted-foreground" aria-hidden>…</span>
        ) : (
          <button key={p} type="button" aria-current={p === page ? "page" : undefined} onClick={() => onPageChange(p)} className={cn(btn, "relative", p === page ? "text-primary-foreground" : "hover:bg-accent")}>
            {p === page && <motion.span layoutId={`${id}-page`} className="absolute inset-0 rounded-md bg-primary" transition={{ type: "spring", bounce: 0.15, duration: 0.35 }} />}
            <span className="relative">{p}</span>
          </button>
        ),
      )}
      <button type="button" aria-label="Next page" disabled={page >= pageCount} onClick={() => onPageChange(page + 1)} className={cn(btn, "hover:bg-accent")}>
        <ChevronRight className="size-4" />
      </button>
    </nav>
  );
}