{{-- Select Component --}}
@props([
    'name'        => '',
    'options'     => [],
    'selected'    => null,
    'placeholder' => 'Select an option',
    'required'    => false,
    'disabled'    => false,
])

@php
    $c = 'block w-full appearance-none rounded-lg border border-input bg-card px-3 py-2.5 pr-10 text-sm text-card-foreground shadow-sm transition-colors duration-200 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:border-primary-400';
    $c .= $errors->has($name) ? ' border-red-400 focus:border-red-500 focus:ring-red-500/20' : '';
@endphp

<div class="relative">
    <select
        id="{{ $name }}"
        name="{{ $name }}"
        {{ $required ? 'required' : '' }}
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge(['class' => $c]) }}
    >
        {{ $slot }}
    </select>
</div>