@props([
    'title',
    'icon' => null,
    'open' => false,
])

<div
    x-data="{ open: @js((bool) $open) }"
    {{ $attributes->merge(['class' => 'space-y-1']) }}
>
    <button
        type="button"
        class="flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)] px-3 py-2 text-sm text-[var(--color-sidebar-text)] hover:bg-white/5 hover:text-white"
        @click="open = !open"
        :aria-expanded="open"
    >
        <span class="inline-flex items-center gap-2">
            @if ($icon)
                <i class="{{ $icon }} text-base opacity-90" aria-hidden="true"></i>
            @endif
            <span>{{ $title }}</span>
        </span>
        <span class="inline-flex opacity-70 transition-transform" :class="open ? 'rotate-180' : ''">
            <x-ui.icon name="chevron-down" class="h-4 w-4" />
        </span>
    </button>

    <div x-show="open" x-cloak class="ml-2 space-y-1 border-l border-white/10 pl-2">
        {{ $slot }}
    </div>
</div>