import Link from "next/link";
import { cn } from "@/lib/cn";

type PaginationProps = {
  page: number;
  pageCount: number;
  total: number;
  pageSize: number;
  /** Builds the href for a page number, preserving other query params. */
  hrefFor: (page: number) => string;
};

const linkClass =
  "inline-flex h-8 items-center rounded-md border border-slate-300 bg-white px-3 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50";

export function Pagination({ page, pageCount, total, pageSize, hrefFor }: PaginationProps) {
  if (total === 0) return null;

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

  return (
    <div className="flex items-center justify-between gap-3 border-t border-slate-200 px-4 py-3">
      <p className="text-xs text-slate-500">
        Showing <span className="font-medium text-slate-700">{from}</span>–
        <span className="font-medium text-slate-700">{to}</span> of{" "}
        <span className="font-medium text-slate-700">{total}</span>
      </p>
      {pageCount > 1 && (
        <nav className="flex items-center gap-2" aria-label="Pagination">
          {page > 1 ? (
            <Link href={hrefFor(page - 1)} className={linkClass}>
              Previous
            </Link>
          ) : (
            <span className={cn(linkClass, "pointer-events-none opacity-50")}>Previous</span>
          )}
          <span className="text-xs text-slate-500">
            Page {page} of {pageCount}
          </span>
          {page < pageCount ? (
            <Link href={hrefFor(page + 1)} className={linkClass}>
              Next
            </Link>
          ) : (
            <span className={cn(linkClass, "pointer-events-none opacity-50")}>Next</span>
          )}
        </nav>
      )}
    </div>
  );
}