@props(['headings' => []])

@if(count($headings) > 0)
<nav
    aria-label="Table of contents"
    class="hidden lg:block sticky top-[90px] self-start"
    id="blog-toc">
    <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-4">
        Sommaire
    </p>
    <ol class="space-y-2 text-sm">
        @foreach($headings as $heading)
        <li>
            <a
                href="#{{ $heading['slug'] }}"
                class="blog-toc-link block py-1 pl-3 border-l-2 border-transparent text-muted-foreground hover:text-primary hover:border-primary transition-all duration-200 {{ ($heading['level'] ?? 2) === 3 ? 'pl-6 text-xs' : '' }}"
                data-toc-slug="{{ $heading['slug'] }}">
                {{ $heading['text'] }}
            </a>
        </li>
        @endforeach
    </ol>
</nav>
@endif