Paginación.

<nav class="ui-sample ui-nav" data-pagination="true" aria-label="Paginación"><a rel="prev" href="?page=1">Anterior</a><a href="?page=1">1</a><a aria-current="page" href="?page=2">2</a><a href="?page=3">3</a><a rel="next" href="?page=3">Siguiente</a></nav>

<nav class="ui-sample ui-nav border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" data-pagination="true" aria-label="Paginación"><a class="underline underline-offset-4" rel="prev" href="?page=1">Anterior</a><a class="underline underline-offset-4" href="?page=1">1</a><a class="underline underline-offset-4" aria-current="page" href="?page=2">2</a><a class="underline underline-offset-4" href="?page=3">3</a><a class="underline underline-offset-4" rel="next" href="?page=3">Siguiente</a></nav>

export interface PaginationNavItem {
  /** Número o texto de la página. */
  label: string;
  href: string;
  /** Página que se está viendo; recibe `aria-current="page"`. */
  current?: boolean;
}

export interface PaginationNavProps {
  /** Nombre accesible del `<nav>`. */
  label?: string;
  /** Páginas visibles entre «Anterior» y «Siguiente»; marca una con `current`. */
  items?: PaginationNavItem[];
  /** Total de resultados de la consulta, independiente de la ventana visible. */
  total?: number;
  /** Texto contextual opcional, por ejemplo «Página 3 de 8 · 160 resultados». */
  summary?: string;
  /** Texto del enlace a la página anterior. */
  previousLabel?: string;
  /** Enlace a la página anterior; vacío o `null`, no se muestra (primera página). */
  previousHref?: string | null;
  /** Texto del enlace a la página siguiente. */
  nextLabel?: string;
  /** Enlace a la página siguiente; vacío o `null`, no se muestra (última página). */
  nextHref?: string | null;
  className?: string;
}

const PAGINATION_NAV_ITEMS: PaginationNavItem[] = [
  { label: "1", href: "?page=1" },
  { label: "2", href: "?page=2", current: true },
  { label: "3", href: "?page=3" },
];

/**
 * Paginación de una lista o de resultados de búsqueda: enlaces a la página anterior, a páginas numeradas y a la siguiente.
 *
 * Cada página es un enlace, así funciona sin JavaScript. En la primera o la última página, pasa `null` en `previousHref` o `nextHref`: sin la prop se usa el enlace por defecto.
 *
 * @example <PaginationNav previousHref="?p=3" nextHref="?p=5" items={[{ label: "3", href: "?p=3" }, { label: "4", href: "?p=4", current: true }, { label: "5", href: "?p=5" }]} />
 * @example <PaginationNav previousHref={null} nextHref="?p=2" items={[{ label: "1", href: "?p=1", current: true }, { label: "2", href: "?p=2" }]} />
 */
export function PaginationNav({
  label = "Paginación",
  items = PAGINATION_NAV_ITEMS,
  total,
  summary,
  previousLabel = "Anterior",
  previousHref = "?page=1",
  nextLabel = "Siguiente",
  nextHref = "?page=3",
  className,
}: PaginationNavProps) {
  if (total !== undefined && (!Number.isSafeInteger(total) || total < 0)) throw new RangeError("El total debe ser un entero no negativo");
  if (!items.length && !previousHref && !nextHref && total === undefined && !summary) return null;
  const context = summary ?? (total === undefined ? undefined : `${new Intl.NumberFormat("es-CL").format(total)} ${total === 1 ? "resultado" : "resultados"}`);
  return (
    <nav className={["ui-nav", className].filter(Boolean).join(" ")} data-pagination aria-label={label}>
      {context ? <span data-page-summary>{context}</span> : null}
      {previousHref ? <a rel="prev" href={previousHref}>{previousLabel}</a> : null}
      {items.map((item, i) => (
        <a key={i} aria-current={item.current ? "page" : undefined} href={item.href}>{item.label}</a>
      ))}
      {nextHref ? <a rel="next" href={nextHref}>{nextLabel}</a> : null}
    </nav>
  );
}