{{--
    <x-checkout::select name="billing_country_id" label="Country" :options="$countries" required />
    <x-checkout::select name="shipping_state" label="Region" :options="$regions" value-field="name" required />

    `options` is an iterable of models/objects; `label` is always read from
    `->name`, the submitted value from `->{$valueField}` (default `id`, but e.g.
    `name` for Lunar states — table-rate-shipping resolves those with
    State::whereName(), so the address must carry the exact name string).
--}}
@props([
    'name',
    'label',
    'options' => [],
    'value' => null,
    'placeholder' => null,
    'required' => false,
    'valueField' => 'id',
])

@php($selected = old($name, $value))

<div class="bbk-field">
    <label class="bbk-field-label" for="bbk-{{ $name }}">{{ $label }}</label>
    <select
        name="{{ $name }}"
        id="bbk-{{ $name }}"
        @if ($required) required @endif
        {{ $attributes->class(['bbk-field-input', 'bbk-field-input--error' => $errors->has($name)]) }}
    >
        @if ($placeholder)
            <option value="" @selected(! $selected)>{{ $placeholder }}</option>
        @endif
        @foreach ($options as $option)
            <option value="{{ $option->{$valueField} }}" @selected((string) $selected === (string) $option->{$valueField})>
                {{ $option->name }}
            </option>
        @endforeach
    </select>
    <p class="bbk-field-error" data-bbk-field-error="{{ $name }}" @unless ($errors->has($name)) hidden @endunless>{{ $errors->first($name) }}</p>
</div>