@props([
    'options' => [],
    'name' => '',
    'placeholder' => '',
    'labelKey' => 'label',
    'valueKey' => 'value',
    'label' => '',
    'required' => false,
    'selected' => '',
    'selectablePlaceholder' => false
    ]
)
<div class="flex flex-col space-y-2">

    @if($label !== '')
        <label class="text-sm font-bold" for="{{$name}}">
            {{$label}}
            @if($required)
                *
            @endif
        </label>
    @endif

    <select
        name="{{$name}}"
        required="{{$required?'required':''}}"
        class="bg-[#F3F3F5] py-2 px-4 rounded-lg text-sm font-bold invalid:text-accent-600 text-black h-full"
    >
        @if($placeholder !== '')
            <option
                value=" "
                {{old($name, request($name, $selected)) === '' || $selected === '' ? 'selected' : ''}}  {{$selectablePlaceholder ? '' : 'disabled'}} >{{$placeholder}}</option>
        @endif

        @foreach($options as $option)
            <option
                value="{{$option[$valueKey]}}" {{$option[$valueKey] == old($name, request($name, $selected)) ? 'selected' : ''}}> {{$option[$labelKey]}} </option>
        @endforeach
    </select>

    <x-ui.inline-error :name="$name"/>
</div>