@props([
    'name',
    'label' => null,
    'options' => [],
    'selected' => null,
    'required' => false,
    'placeholder' => null,
    'help' => null,
    // Optional bootstrap-icons name rendered inside the control; omitted by
    // every existing caller, which keeps their markup unchanged.
    'icon' => null,
    'spacing' => 'mb-3',
])

@php
    $id = $attributes->get('id', 'field-'.$name);
    $hasError = $errors->has($name);
    $current = old($name, $selected);
@endphp

<div class="{{ $spacing }}">
    @if ($label)
        <label for="{{ $id }}" class="form-label">
            {{ $label }}
            @if ($required)<span class="text-danger" aria-hidden="true">*</span>@endif
        </label>
    @endif

    <div class="clinic-field @if ($icon) clinic-field--icon @endif">
        @if ($icon)
            <i class="bi bi-{{ $icon }} clinic-field__icon" aria-hidden="true"></i>
        @endif

        <select
            name="{{ $name }}"
            id="{{ $id }}"
            @if ($required) required aria-required="true" @endif
            @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
            {{ $attributes->merge(['class' => 'form-select'.($hasError ? ' is-invalid' : '')]) }}
        >
            @if ($placeholder)
                <option value="">{{ $placeholder }}</option>
            @endif

            @foreach ($options as $optionValue => $optionLabel)
                <option value="{{ $optionValue }}" @selected((string) $current === (string) $optionValue)>
                    {{ $optionLabel }}
                </option>
            @endforeach
        </select>
    </div>

    @if ($help)<div class="form-text">{{ $help }}</div>@endif

    {{-- See the note in form/input: the wrapper breaks Bootstrap's sibling rule. --}}
    @error($name)
        <div class="invalid-feedback d-block" id="{{ $id }}-error">{{ $message }}</div>
    @enderror
</div>