@props([
    'label'   => 'Opciones',
    'labelButton'   => null,
    'icon'    => 'lucide-list',
    'options' => [],
])

<div x-data="{ open: false }" class="relative inline-block text-left">

    {{-- BOTÓN --}}
   <button
    type="button"
    @click="open = !open"
    {{-- @click.outside="open = false" --}}
    @click.outside="open = false"
    class="
        inline-flex items-center gap-2
        {{ $labelButton ? 'px-4':'' }}  py-2
        bg-white
        border border-orange-200
        text-orange-700
        rounded-xl
        shadow-sm
        hover:bg-oragne-50
        hover:border-orange-300
        hover:shadow-md
        active:scale-95
        transition-all
        font-semibold
    "
    title="{{ $label }}"
>
    <x-dynamic-component :component="$icon" class="w-4 h-4 text-orange-600"/>

    @if($labelButton) 
        <span class="text-sm">{{$labelButton}}</span>
    @endif
    
</button>

    {{-- DROPDOWN --}}
    <div
        x-show="open"
        x-transition
        class="fixed z-50 mt-2 w-72 right-[121px] 
               rounded-xl border border-gray-200 bg-white
               shadow-lg overflow-hidden"
        style="display:none"
    >

        {{-- HEADER --}}
        <div class="px-4 py-3 border-b bg-gray-50">
            <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                <x-dynamic-component :component="'lucide-book'" class="w-4 h-4 text-orange-600"/>
                {{ $label }}
            </h3>
        </div>

        {{-- LISTA TIPO TABLA --}}
        <ul class="divide-y divide-gray-100">

            @forelse($options as $group)

                {{-- CABECERA DE GRUPO --}}
                @if(isset($group['group']))
                    <li class="px-4 py-2 text-xs font-bold text-gray-600 uppercase bg-gray-50">
                        {{ $group['group'] }}
                    </li>
                @endif

                {{-- FILAS --}}
                @foreach($group['items'] ?? [] as $option)

                    {{-- LINK --}}
                    @if(isset($option['url']))
                        <li>
                            <a href="{{ $option['url'] }}"
                               class="grid grid-cols-[20px_1fr_16px]
                                      items-center gap-3
                                      px-4 py-2.5
                                      text-sm text-gray-700
                                      hover:bg-purple-50 hover:text-purple-700
                                      transition">

                                {{-- ICONO --}}
                                @if(!empty($option['icon']))
                                    <x-dynamic-component
                                        :component="$option['icon']"
                                        class="w-4 h-4 text-purple-600"/>
                                @else
                                    <span></span>
                                @endif

                                {{-- TEXTO --}}
                                <span class="truncate text-purple-600">{{ $option['label'] }}</span>

                                {{-- INDICADOR --}}
                                <span class="text-gray-300">›</span>
                            </a>
                        </li>
                    {{-- BOTÓN --}}
                    @elseif(isset($option['action']))
                        <li class="flex justify-center px-4 py-3">
                            <button
                                type="{{ $option['type'] ?? 'button' }}"
                                 {!! $option['action'] !!}
                                class="w-full max-w-xs
                   flex items-center justify-center gap-3
                   px-5 py-2.5
                   bg-gradient-to-r {{ $option['button_class'] ?? 'from-purple-500 to-purple-600' }}
                   text-sm font-bold
                   rounded-xl shadow-md
                   transition-all hover:opacity-90
                   active:scale-95 shadow-md"
                            >

                                {{-- ICONO --}}
                                @if(!empty($option['icon']))
                                    <x-dynamic-component
                                        :component="$option['icon']"
                                        class="w-4 h-4 {{ $option['icon_class'] ?? 'text-gray-500' }}"/>
                                @else
                                    <span></span>
                                @endif


                                {{-- TEXTO --}}
                                <span class="truncate">{{ $option['label'] }}</span>

                                {{-- INDICADOR --}}
                                <span class="text-gray-300">›</span>
                            </button>
                        </li>

                    {{-- HTML LIBRE --}}
                    @elseif(isset($option['html']))
                        <li class="px-2 py-2">
                            {!! $option['html'] !!}
                        </li>
                    @endif

                @endforeach

            @empty
                <li class="px-4 py-3 text-sm text-gray-400">
                    Sin opciones
                </li>
            @endforelse

        </ul>
    </div>
</div>