@props(['label', 'icon', 'active' => false])

<div x-data="{ open: {{ $active ? 'true' : 'false' }} }" class="space-y-1">
    <!-- Trigger -->
    <button @click="open = !open"
        :class="{ 'bg-purple-100 text-purple-800 font-semibold rounded-lg': open }"
        class="w-full flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100 hover:rounded-lg transition">
        <i class="fa-solid {{ $icon }} w-5 mr-2"></i>
        <span class="flex-1 text-left">{{ $label }}</span>
        <svg :class="{ 'rotate-180': open }" class="h-4 w-4 ml-auto transform transition-transform" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.25 8.29a.75.75 0 01-.02-1.06z" clip-rule="evenodd" />
        </svg>
    </button>

    <!-- Items -->
    <div x-show="open" x-transition class="ml-6 space-y-1">
        {{ $slot }}
    </div>
</div>