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

<div x-data="{ open: false }">

    <button 
        @click="open = !open"
        class="w-full flex items-center justify-between px-4 py-2 rounded-lg
               hover:bg-gray-800 text-gray-400 hover:text-white transition">

        <div class="flex items-center gap-3">
            <i class="{{ $icon }} w-5 text-center"></i>
            <span>{{ $label }}</span>
        </div>

        <i class="fas fa-chevron-down text-xs transition-transform duration-200"
           :class="open ? 'rotate-180' : ''"></i>
    </button>

    <div 
        x-show="open"
        x-transition
        class="ml-8 mt-1 space-y-1">

        @foreach($routes as $route)
            <a href="{{ $route['href'] }}"
               class="block px-3 py-1 rounded-md text-gray-400 hover:bg-gray-800 hover:text-white transition text-sm">
                {{ $route['label'] }}
            </a>
        @endforeach
    </div>
</div>