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

<div x-data="{ open:false }" class="transition">
    <button @click="open = !open"
        class="flex items-center justify-between gap-3 w-full px-6 py-3 rounded-lg hover:bg-gray-800">
        <div class="flex items-center gap-3">
            <x-sidebar-icon :name="$icon"/>
            <span>{{ $label }}</span>
        </div>
        <span class="transform" :class="{ 'rotate-180': open }">▼</span>
    </button>

    <div x-show="open" x-collapse class="bg-gray-800 text-gray-400">
        @foreach ($routes as $route)
            <a href="{{ $route['href'] }}"
               class="block px-10 py-2 hover:text-white hover:bg-gray-700">
                {{ $route['label'] }}
            </a>
        @endforeach
    </div>
</div>