import { Pagination } from '@astryxdesign/core/Pagination';
import type { Paged } from './usePaged';
import { PAGE_SIZES } from './usePaged';
import './tablePager.css';

/**
 * The pager that sits under a table.
 *
 * One component so every table in the console counts, labels and behaves the
 * same way, rather than each page inventing its own row of buttons.
 *
 * ── It hides itself ─────────────────────────────────────────────────────────
 *
 * Nothing renders while everything fits on one page. That is what makes it safe
 * to put under EVERY table, including the ones that usually hold four rows: a
 * pager reading "1–4 of 4" next to a dead prev/next pair is noise, and noise
 * under every table is worse than no pager at all. It appears exactly when it
 * has something to offer.
 *
 * `variant="count"` — "21–40 of 96" — rather than a strip of page numbers.
 * With 25 rows a page a busy day is four pages, and the number an operator
 * actually wants is how much is left, not which of four buttons is lit.
 */
export function TablePager({
  paged,
  label = 'rows',
}: {
  paged: Paged<unknown>;
  /** What is being counted, for the screen-reader label: "orders", "products". */
  label?: string;
}) {
  if (paged.totalPages <= 1) return null;

  return (
    <div className="table-pager">
      <Pagination
        page={paged.page}
        onChange={paged.setPage}
        totalItems={paged.total}
        pageSize={paged.pageSize}
        pageSizeOptions={PAGE_SIZES}
        onPageSizeChange={paged.setPageSize}
        variant="count"
        size="sm"
        label={`Page through ${label}`}
      />
    </div>
  );
}