{{-- 
Select Component
Usage:
<x-ui.inputs.select name="country" :options="$countries" label="Country" />
<x-ui.inputs.select name="country" :options="$countries" label="Country" placeholder="Select a country" />
<x-ui.inputs.select name="country" :options="$countries" label="Country" error="Please select a country" />
<x-ui.inputs.select name="country" :options="$countries" label="Country" disabled />
--}}

@props([
    'name',
    'options' => [],
    'label' => null,
    'placeholder' => null,
    'error' => null,
    'disabled' => false,
])

<div class="w-full">
    @if($label)
        <label for="{{ $name }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            {{ $label }}
            @if($attributes->has('required'))
                <span class="text-red-500">*</span>
            @endif
        </label>
    @endif
    
    <select 
        id="{{ $name }}"
        name="{{ $name }}"
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge([
            'class' => 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:focus:border-primary-500 dark:focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed' . ($error ? ' border-red-300 text-red-900 focus:border-red-500 focus:ring-red-500' : '')
        ]) }}
    >
        @if($placeholder)
            <option value="">{{ $placeholder }}</option>
        @endif
        
        @foreach($options as $value => $label)
            <option value="{{ $value }}">{{ $label }}</option>
        @endforeach
    </select>
    
    @if($error)
        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $error }}</p>
    @endif
</div>