---
/**
 * ChapterTOC — collapsible "On this page" anchor list.
 *
 * Uses native <details> — collapsed by default; no JavaScript required.
 * Shows h2 and h3 headings only (h1 is the chapter title; h4+ is noise
 * in a TOC). Each heading link uses the slug Astro's MDX generates.
 *
 * If the chapter has fewer than 3 matching headings, the TOC renders
 * nothing — an anchor list for a short chapter is clutter.
 *
 * The h2/h3 filter is the shared `tocHeadings` (lib/section-map.ts) — the SAME
 * one the right-gutter SectionMap island uses, so this collapsed fallback and
 * the gutter map carry identical entries (#section-map). On desktop (>= 64rem)
 * this <details> is CSS-hidden and the gutter map takes over; below it, this is
 * the fallback.
 */
import type { MarkdownHeading } from 'astro';
import { tocHeadings } from '../src/lib/section-map';

interface Props {
  headings: MarkdownHeading[];
}
const { headings } = Astro.props;

const toc = tocHeadings(headings);
const showToc = toc.length >= 3;
---
{showToc && (
  <details class="chapter-toc">
    <summary>On this page</summary>
    <ol>
      {toc.map((h) => (
        <li class={`toc-h${h.depth}`}>
          <a href={`#${h.slug}`}>{h.text}</a>
        </li>
      ))}
    </ol>
  </details>
)}