GuideChapterToc

---
import Heading from '../0_atoms/Heading.astro'
import Link from '../0_atoms/Link.astro'

export interface TocChapter {
  number: number
  title: string
  href: string
}

interface Props {
  chapters: TocChapter[]
  variant: 'inline' | 'sidebar'
  currentHref?: string
  guideTitle?: string
  guideHref?: string
  class?: string
}

const { chapters, variant, currentHref, guideTitle, guideHref, class: className } = Astro.props
---

{
  variant === 'inline' ? (
    <nav aria-label="Chapters" class:list={['guide-chapter-toc guide-chapter-toc--inline mt-10 not-prose', className]}>
      <ol class="list-none pl-0 m-0 space-y-2">
        {chapters.map(c => (
          <li class="flex items-baseline gap-3">
            <span class="meta text-sm text-ink-faint tabular-nums">{String(c.number).padStart(2, '0')}</span>
            <Link href={c.href} class="text-ink no-underline hover:underline">
              {c.title}
            </Link>
          </li>
        ))}
      </ol>
    </nav>
  ) : (
    <nav
      aria-label="Chapters"
      class:list={['guide-chapter-toc guide-chapter-toc--sidebar lg:sticky lg:top-8 not-prose', className]}
    >
      {guideTitle && guideHref && (
        <Link
          href={guideHref}
          isMeta={true}
          class="mb-2 block text-xs uppercase tracking-widest text-ink-faint hover:text-ink"
        >
          ↩ {guideTitle}
        </Link>
      )}
      <ol class="list-none pl-0 m-0 space-y-1">
        {chapters.map(c => {
          const isCurrent = c.href === currentHref
          return (
            <li>
              <a
                href={c.href}
                aria-current={isCurrent ? 'page' : undefined}
                class:list={[
                  'block py-1 text-sm no-underline',
                  isCurrent ? 'font-medium text-ink' : 'text-ink-muted hover:text-ink',
                ]}
              >
                <span class="meta mr-2 tabular-nums text-ink-faint">{String(c.number).padStart(2, '0')}</span>
                {c.title}
              </a>
            </li>
          )
        })}
      </ol>
    </nav>
  )
}