@props([
    'icon' => null,
    'options' => [],
])

@php
    $optionKeys = array_keys($options);
    $defaultKey = $optionKeys[0] ?? null;
    $defaultLabel = $options[$defaultKey] ?? 'Select...';
@endphp

<div x-data="{ open: false, selectedKey: '{{ $defaultKey }}', selectedLabel: '{{ $defaultLabel }}' }" class="relative">
    {{-- Icon --}}
    @if ($icon)
        <div class="absolute top-0 left-0 flex items-center h-full px-2 pointer-events-none">
            <x-icon :name="$icon" class="w-3" />
        </div>
    @endif

    {{-- Trigger --}}
    <button @click="open = !open" type="button"
        class="w-full px-2 py-1 pl-8 text-left border border-gray-300 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500">
        <span x-text="selectedLabel"></span>
    </button>

    {{-- Dropdown Options --}}
    <div x-show="open" @click.outside="open = false"
        class="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg">
        @foreach ($options as $value => $label)
            <div @click="selectedKey = '{{ $value }}'; selectedLabel = '{{ $label }}'; open = false"
                class="px-4 py-2 text-black cursor-pointer hover:bg-gray-100">
                {{ $label }}
            </div>
        @endforeach
    </div>

    {{-- Hidden Input --}}
    <input type="hidden" name="{{ $attributes->get('name') }}" :value="selectedKey" />
</div>