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

/**
 * Previous/Next controls for cursor-paged lists.
 */
export function CursorPagerControls({
  page,
  canPrev,
  hasNext,
  loading,
  onPrev,
  onNext,
  itemCount,
}: {
  page: number;
  canPrev: boolean;
  hasNext: boolean;
  loading?: boolean;
  onPrev: () => void;
  onNext: () => void;
  itemCount?: number;
}) {
  return (
    <div className="pager">
      <span className="pager-info">
        Page {page}
        {itemCount !== undefined ? ` · ${itemCount} rows` : ""}
        {loading ? " · loading…" : ""}
      </span>
      <button
        type="button"
        className="btn small"
        onClick={onPrev}
        disabled={!canPrev || loading}
      >
        <ChevronLeft size={13} aria-hidden="true" /> Previous
      </button>
      <button
        type="button"
        className="btn small"
        onClick={onNext}
        disabled={!hasNext || loading}
      >
        Next <ChevronRight size={13} aria-hidden="true" />
      </button>
    </div>
  );
}
