---
interface Heading {
  id: string
  text: string
  level: 2 | 3
}

interface Props {
  headings: Heading[]
  title?: string
}

const { headings, title = 'Innehåll' } = Astro.props
---

{headings.length >= 3 && (
  <nav class="rounded-card border border-[#1E3058] bg-[#0F1C35] p-4 mb-8 not-prose" aria-label="Innehållsförteckning">
    <p class="font-heading font-bold text-sm text-[#8BA3C7] uppercase tracking-wide mb-3">{title}</p>
    <ol class="space-y-1">
      {headings.map(h => (
        <li class={h.level === 3 ? 'ml-4' : ''}>
          <a
            href={`#${h.id}`}
            class="text-sm text-primary hover:text-accent no-underline flex items-center gap-1.5 transition-colors"
          >
            <span class="text-border">{h.level === 2 ? '›' : '››'}</span>
            {h.text}
          </a>
        </li>
      ))}
    </ol>
  </nav>
)}