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

/** Offset pagination with URL-preserving links. */
export function Pagination({ page, pageCount, total, pageSize, hrefFor }: { page: number; pageCount: number; total: number; pageSize: number; hrefFor: (page: number) => string }) {
  if (total === 0) return null;
  const start = (page - 1) * pageSize + 1;
  const end = Math.min(total, page * pageSize);
  return (
    <nav className="flex flex-wrap items-center justify-between gap-3 text-[12.5px] text-fg-muted" aria-label="Pagination">
      <span className="font-mono tabular">
        {formatNumber(start)}–{formatNumber(end)} of {formatNumber(total)}
      </span>
      <div className="flex items-center gap-1">
        <Button asChild={page > 1} variant="outline" size="sm" disabled={page <= 1} aria-label="Previous page">
          {page > 1 ? (
            <Link href={hrefFor(page - 1)} rel="prev">
              <ChevronLeft /> Previous
            </Link>
          ) : (
            <span>
              <ChevronLeft /> Previous
            </span>
          )}
        </Button>
        <span className="px-2 font-mono tabular">
          {page} / {pageCount}
        </span>
        <Button asChild={page < pageCount} variant="outline" size="sm" disabled={page >= pageCount} aria-label="Next page">
          {page < pageCount ? (
            <Link href={hrefFor(page + 1)} rel="next">
              Next <ChevronRight />
            </Link>
          ) : (
            <span>
              Next <ChevronRight />
            </span>
          )}
        </Button>
      </div>
    </nav>
  );
}