@props([
    'options'     => [],
    'value'       => null,
    'name'        => null,
    'ariaLabel'   => null,
    'placeholder' => null,
    'block'       => false,
])


<div @class(['relative items-center', 'flex w-full' => $block, 'inline-flex' => ! $block])>
    <select
        @if($name) name="{{ $name }}" @endif
        @if($ariaLabel) aria-label="{{ $ariaLabel }}" @endif
        {{ $attributes->merge(['class' => 'appearance-none bg-transparent border-b border-black  pr-10 py-2.5 cursor-pointer focus:outline-none'.($block ? ' w-full' : '')]) }}
    >
        @if($placeholder !== null)
            <option value="" @selected($value === null || $value === '')>{{ $placeholder }}</option>
        @endif
        @foreach($options as $option)
            <option value="{{ $option['value'] }}" @selected($value === $option['value'])>{{ $option['label'] }}</option>
        @endforeach
    </select>

    <x-ui.icon name="arrow-down" :size="16" class="pointer-events-none absolute right-4" />
</div>