@props([
'name',
'label' => '',
'placeholder' => '',
'required' => false,
'options' => [],
'class' => '',
])

@php
$hasError = $errors->has($name);
$wrapperClasses = cn(
'border-input bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none h-9 min-w-0',
'has-[select:focus]:border-ring has-[select:focus]:ring-ring/50 has-[select:focus]:ring-[3px]',
$hasError ? 'border-destructive ring-destructive/20' : '',
$class
);
$selectClasses = 'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 text-foreground text-base md:text-sm px-3 py-1 h-full w-full outline-none appearance-none cursor-pointer';
@endphp

<div class="grid gap-2">
    @if($label)
    <label for="{{ $name }}" class="flex items-center gap-2 text-sm leading-none font-medium text-foreground select-none">
        {{ $label }}
    </label>
    @endif

    <div class="{{ $wrapperClasses }}">
        <select
            id="{{ $name }}"
            name="{{ $name }}"
            class="{{ $selectClasses }}"
            @if($required) required @endif
            @if($hasError) aria-invalid="true" aria-describedby="{{ $name }}-error" @endif>
            @if($placeholder)
            <option value="" disabled {{ old($name) ? '' : 'selected' }} class="text-muted-foreground">
                {{ $placeholder }}
            </option>
            @endif

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

        {{-- Dropdown chevron icon --}}
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">
            <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
    </div>

    @error($name)
    <p id="{{ $name }}-error" class="text-destructive text-sm" role="alert">{{ $message }}</p>
    @enderror
</div>