MarkdownProseToc

---
import {
  MARKDOWN_PROSE_TOC_LINK_CLASS,
  MARKDOWN_PROSE_TOC_LIST_CLASS,
  MARKDOWN_PROSE_TOC_NAV_CLASS,
  MARKDOWN_PROSE_TOC_TITLE_CLASS,
  markdownProseTocItemIndentClass,
  type MarkdownProseTocItem,
} from '../../lib/markdown-prose-toc'

interface Props {
  items: MarkdownProseTocItem[]
  class?: string
}

const { items, class: className } = Astro.props
---

{
  items.length > 0 ? (
    <nav class:list={[MARKDOWN_PROSE_TOC_NAV_CLASS, className]} aria-label="On this page">
      <p class={MARKDOWN_PROSE_TOC_TITLE_CLASS}>On this page</p>
      <ol class={MARKDOWN_PROSE_TOC_LIST_CLASS}>
        {items.map(item => (
          <li class={markdownProseTocItemIndentClass(item.depth)}>
            <a href={`#${item.id}`} class={MARKDOWN_PROSE_TOC_LINK_CLASS}>
              {item.text}
            </a>
          </li>
        ))}
      </ol>
    </nav>
  ) : null
}