import { cn } from "@/lib/cn";

type PaginationProps = {
  page: number;
  totalPages: number;
  onChange: (page: number) => void;
};

/** Numbered pagination controls. */
export function Pagination({ page, totalPages, onChange }: PaginationProps) {
  if (totalPages <= 1) return null;

  return (
    <div className="mt-10 flex items-center justify-center gap-2">
      <button
        type="button"
        disabled={page <= 1}
        onClick={() => onChange(page - 1)}
        className="h-9 border border-border px-3 text-[11px] uppercase tracking-[0.12em] disabled:opacity-40"
      >
        Prev
      </button>
      {Array.from({ length: totalPages }).map((_, index) => {
        const value = index + 1;
        return (
          <button
            key={value}
            type="button"
            onClick={() => onChange(value)}
            className={cn(
              "h-9 min-w-9 px-2.5 text-sm transition",
              value === page
                ? "bg-foreground text-background"
                : "border border-border hover:bg-card",
            )}
          >
            {value}
          </button>
        );
      })}
      <button
        type="button"
        disabled={page >= totalPages}
        onClick={() => onChange(page + 1)}
        className="h-9 border border-border px-3 text-[11px] uppercase tracking-[0.12em] disabled:opacity-40"
      >
        Next
      </button>
    </div>
  );
}