@props([
    'items' => [],
])

{{--
Table of Contents Component

Usage:
<x-toc :items="[
    ['id' => 'introduction', 'label' => 'Introduction'],
    ['id' => 'getting-started', 'label' => 'Getting Started', 'children' => [
        ['id' => 'installation', 'label' => 'Installation'],
        ['id' => 'configuration', 'label' => 'Configuration'],
    ]],
]" />

Or manually:
<x-slot:toc>
    <x-toc-link href="#introduction">Introduction</x-toc-link>
    <x-toc-link href="#getting-started">Getting Started</x-toc-link>
</x-slot:toc>
--}}

@if(count($items) > 0)
    <ul class="space-y-1">
        @foreach($items as $item)
            <li>
                <a href="#{{ $item['id'] }}"
                   class="toc-link block py-1 pl-3 border-l-2 border-slate-700 text-slate-400 hover:text-white hover:border-purple-500 transition-colors">
                    {{ $item['label'] }}
                </a>
                @if(isset($item['children']) && count($item['children']) > 0)
                    <ul class="mt-1 ml-3 space-y-1">
                        @foreach($item['children'] as $child)
                            <li>
                                <a href="#{{ $child['id'] }}"
                                   class="toc-link block py-1 pl-3 border-l-2 border-slate-700 text-slate-500 text-sm hover:text-white hover:border-purple-500 transition-colors">
                                    {{ $child['label'] }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </li>
        @endforeach
    </ul>
@else
    {{ $slot }}
@endif