@props([
    'label',
    'name',
    'options' => [],
    'value' => null,
    'placeholder' => 'Select an option',
    'required' => false,
])

<div>
    <label for="{{ $name }}" class="mb-1.5 block text-base font-medium text-slate-700">
        {{ $label }}
        @if ($required)
            <span class="text-error-500">*</span>
        @endif
    </label>

    <select
        id="{{ $name }}"
        name="{{ $name }}"
        @if ($required) required @endif
        {{ $attributes->merge([
            'class' => 'h-12 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-base text-slate-900 shadow-theme-xs focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10',
        ]) }}
    >
        <option value="">{{ $placeholder }}</option>
        @foreach ($options as $optionValue => $optionLabel)
            <option value="{{ $optionValue }}" @selected(old($name, $value) === $optionValue)>{{ $optionLabel }}</option>
        @endforeach
    </select>

    <x-input-error :messages="$errors->get($name)" class="mt-2 text-sm text-error-600" />
</div>