@props([
    'name',
    'label' => null,
    'options' => [],
    'value' => null,
    'placeholder' => 'Selecciona una opción...',
    'disabled' => false,
    'class' => '',
])

<div class="flex flex-col gap-1">
    @if ($label)
        <label for="{{ $name }}" class="text-sm font-medium text-gray-700">
            {{ $label }}
        </label>
    @endif

    <select
        name="{{ $name }}"
        id="{{ $name }}"
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge([
            'class' => "w-full border border-gray-300 rounded-lg p-2 pr-10 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition  text-sm text-gray-700 $class"
        ]) }}
    >
        @if ($placeholder)
            <option value="" disabled {{ $value ? '' : 'selected' }}>
                {{ $placeholder }}
            </option>
        @endif

        @foreach ($options as $option)
            <option 
                value="{{ $option['id'] }}"
                @if (isset($option['valor-hide'])) data-hide="{{ $option['valor-hide'] }}" @endif
                {{ (string)$option['id'] === (string)$value ? 'selected' : '' }}
            >
                {{ $option['nombre'] }}
            </option>
        @endforeach
    </select>
    
    @error($name)
        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
    @enderror
</div>