@props(['key', 'label'])

{{--
| A collapsible sidebar section.
|
| The open/closed state lives on the <nav> that wraps every group, so the groups
| share one record and one localStorage write rather than four competing ones.
--}}

<div class="pt-4">
    <button type="button" @click="toggle('{{ $key }}')"
            :aria-expanded="open('{{ $key }}') ? 'true' : 'false'"
            aria-controls="nav-group-{{ $key }}"
            class="group flex w-full items-center gap-1.5 rounded-lg px-3 pb-1.5 text-[10px] font-bold
                   uppercase tracking-widest text-slate-500 transition hover:text-slate-300">
        <span class="flex-1 text-left">{{ $label }}</span>

        {{-- Hidden until hover while the section is open (it is furniture), but
             always visible once collapsed — otherwise the missing items look
             like a bug rather than a choice. --}}
        <x-icon name="chevron-down" class="size-3 shrink-0 transition-transform duration-200"
                ::class="open('{{ $key }}') ? 'opacity-0 group-hover:opacity-100' : '-rotate-90 opacity-100'" />
    </button>

    <div id="nav-group-{{ $key }}" x-show="open('{{ $key }}')"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="-translate-y-1 opacity-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-end="-translate-y-1 opacity-0"
         class="space-y-1">
        {{ $slot }}
    </div>
</div>