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

{{--
    Native <select>, styled to match the site's bordered/uppercase look.
    Usage:
    <x-ui.select
        :options="[['value' => 'a', 'label' => 'Option A'], ...]"
        value="a"
        ariaLabel="Sort products"
    />
--}}

<div class="relative inline-flex items-center">
    <select
        @if($name) name="{{ $name }}" @endif
        @if($ariaLabel) aria-label="{{ $ariaLabel }}" @endif
        {{ $attributes->merge(['class' => 'appearance-none bg-transparent border border-black pl-4 pr-10 py-2.5 font-display font-bold cursor-pointer focus:outline-none']) }}
    >
        @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>