import { ChevronLeft, ChevronRight } from 'lucide-react';

interface PaginationProps {
  page: number;
  /** Whether a next page exists (typically `pageResults.length === PAGE_SIZE`). */
  hasNext: boolean;
  /** Disables both buttons while the next page is still placeholder data. */
  isLoading?: boolean;
  onPrev: () => void;
  onNext: () => void;
}

/**
 * Prev/Next pager with a page indicator. Extracted from the duplicated
 * implementation in Tracks/Albums/Artists/Genres so the controls stay
 * consistent and accessible (aria-labels, disabled semantics) across pages.
 */
export function Pagination({ page, hasNext, isLoading, onPrev, onNext }: PaginationProps) {
  const prevDisabled = page === 0 || isLoading;
  const nextDisabled = !hasNext || isLoading;
  return (
    <div className="flex items-center justify-between pt-2">
      <button
        onClick={onPrev}
        disabled={prevDisabled}
        aria-label="Previous page"
        className="inline-flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-sm text-text hover:bg-surface1 disabled:opacity-40 disabled:hover:bg-transparent"
      >
        <ChevronLeft size={16} /> Prev
      </button>
      <span className="text-sm text-muted tabular-nums" aria-live="polite">Page {page + 1}</span>
      <button
        onClick={onNext}
        disabled={nextDisabled}
        aria-label="Next page"
        className="inline-flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-sm text-text hover:bg-surface1 disabled:opacity-40 disabled:hover:bg-transparent"
      >
        Next <ChevronRight size={16} />
      </button>
    </div>
  );
}
