Tabla de contenidos.

<nav class="ui-sample ui-toc" aria-label="En esta página"><strong>En esta página</strong><ol><li><a href="#resumen">Resumen</a></li><li><a href="#metodologia">Metodología</a></li><li><a aria-current="location" href="#resultados">Resultados</a></li><li><a href="#limitaciones">Limitaciones</a></li></ol></nav>

<nav class="ui-sample ui-toc border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" aria-label="En esta página"><strong>En esta página</strong><ol class="grid gap-2"><li><a class="underline underline-offset-4" href="#resumen">Resumen</a></li><li><a class="underline underline-offset-4" href="#metodologia">Metodología</a></li><li><a class="underline underline-offset-4" aria-current="location" href="#resultados">Resultados</a></li><li><a class="underline underline-offset-4" href="#limitaciones">Limitaciones</a></li></ol></nav>

export interface TableOfContentsItem {
  label: string;
  /** Ancla de la sección, con `#`. */
  href: string;
  /** Sección visible en pantalla; recibe `aria-current="location"`. */
  current?: boolean;
}

export interface TableOfContentsProps {
  /** Título visible sobre la lista. */
  title?: string;
  /** Nombre accesible del `<nav>`; por defecto, el título. */
  label?: string;
  /** Secciones de la página, en orden de lectura. */
  items?: TableOfContentsItem[];
  className?: string;
}

const TABLE_OF_CONTENTS_ITEMS: TableOfContentsItem[] = [
  { label: "Resumen", href: "#resumen" },
  { label: "Metodología", href: "#metodologia" },
  { label: "Resultados", href: "#resultados", current: true },
  { label: "Limitaciones", href: "#limitaciones" },
];

/**
 * Tabla de contenidos de una página larga: lista numerada de anclas a sus secciones, junto al texto.
 *
 * Marca la sección que se está leyendo con `current`; el enlace recibe `aria-current="location"`.
 *
 * @example <TableOfContents items={[{ label: "Contexto", href: "#contexto" }, { label: "Resultados", href: "#resultados", current: true }]} />
 * @example <TableOfContents title="Índice del capítulo" items={[{ label: "Antecedentes", href: "#antecedentes", current: true }, { label: "Conclusiones", href: "#conclusiones" }]} />
 */
export function TableOfContents({
  title = "En esta página",
  label,
  items = TABLE_OF_CONTENTS_ITEMS,
  className,
}: TableOfContentsProps) {
  if (!items.length) return null;
  return (
    <nav className={["ui-toc", className].filter(Boolean).join(" ")} aria-label={label || title || undefined}>
      {title ? <strong>{title}</strong> : null}
      <ol>
        {items.map((item, i) => (
          <li key={i}>
            <a aria-current={item.current ? "location" : undefined} href={item.href}>{item.label}</a>
          </li>
        ))}
      </ol>
    </nav>
  );
}