@props([
    'id',
    'name',
    'value' => '',
    'options' => [],
])

@php
    $selectedValue = (string) $value;
    $selectedOption = collect($options)->first(fn (array $option): bool => (string) $option['value'] === $selectedValue);
    $selectedLabel = $selectedOption['label'] ?? ($options[0]['label'] ?? 'Selecione');
@endphp

<div class="relative" data-select-menu>
    <input type="hidden" name="{{ $name }}" value="{{ $selectedValue }}" data-select-input>

    <button
        id="{{ $id }}"
        type="button"
        class="focus-ring flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50"
        aria-haspopup="listbox"
        aria-expanded="false"
        data-select-trigger
    >
        <span class="truncate" data-select-label>{{ $selectedLabel }}</span>
        <svg class="ml-2 h-4 w-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path d="m6 9 6 6 6-6" />
        </svg>
    </button>

    <div
        class="absolute z-50 mt-2 hidden max-h-64 w-full min-w-48 overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
        role="listbox"
        data-select-content
    >
        @foreach ($options as $option)
            @php
                $optionValue = (string) $option['value'];
                $selected = $optionValue === $selectedValue;
            @endphp

            <button
                type="button"
                class="{{ $selected ? 'bg-accent text-accent-foreground' : 'text-popover-foreground' }} flex h-8 w-full items-center rounded-sm px-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                role="option"
                aria-selected="{{ $selected ? 'true' : 'false' }}"
                data-select-option
                data-value="{{ $optionValue }}"
            >
                <span class="truncate">{{ $option['label'] }}</span>
            </button>
        @endforeach
    </div>
</div>