@props([
    'label' => null,
    'name',
    'options' => [],
    'value' => null,
    'placeholder' => null,
    'help' => null,
    'field' => null,
])

@php($fieldName = $field ?? $name)

<div>
    @if ($label)
        <label for="{{ $name }}" class="mb-1.5 block text-sm font-bold text-slate-700">
            {{ $label }}
        </label>
    @endif

    <select
        id="{{ $name }}"
        name="{{ $name }}"
        {{ $attributes->merge(['class' => 'h-11 w-full rounded-lg border border-booklio-border bg-white px-3.5 text-sm font-medium text-booklio-dark shadow-soft outline-none transition focus:border-booklio-primary focus:ring-4 focus:ring-blue-100']) }}
    >
        @if ($placeholder)
            <option value="">{{ $placeholder }}</option>
        @endif
        @foreach ($options as $optionValue => $labelText)
            <option value="{{ $optionValue }}" @selected(old($fieldName, $value) == $optionValue)>{{ $labelText }}</option>
        @endforeach
    </select>

    @error($fieldName)
        <p class="mt-1.5 text-xs font-semibold text-red-600">{{ $message }}</p>
    @elseif($help)
        <p class="mt-1.5 text-xs text-booklio-muted">{{ $help }}</p>
    @enderror
</div>