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="btn-bin btn-bin-outline btn-bin-sm"
      >
        Prev
      </button>
      {Array.from({ length: totalPages }).map((_, index) => {
        const value = index + 1;
        return (
          <button
            key={value}
            type="button"
            onClick={() => onChange(value)}
            className={cn(
              "btn-bin btn-bin-icon",
              value === page ? "" : "btn-bin-outline",
            )}
          >
            {value}
          </button>
        );
      })}
      <button
        type="button"
        disabled={page >= totalPages}
        onClick={() => onChange(page + 1)}
        className="btn-bin btn-bin-outline btn-bin-sm"
      >
        Next
      </button>
    </div>
  );
}