@props([
    'name',
    'label' => null,
    'helper' => null,
    'error' => null,
    'options' => [],
    'selected' => null,
    'required' => false,
    'disabled' => false,
    'placeholder' => 'Select an option',
    'color' => 'emerald',
])

@php
    $focusColors = [
        'emerald' => 'focus:ring-emerald-500/50 focus:border-emerald-500',
        'amber' => 'focus:ring-amber-500/50 focus:border-amber-500',
        'cyan' => 'focus:ring-cyan-500/50 focus:border-cyan-500',
        'pink' => 'focus:ring-pink-500/50 focus:border-pink-500',
    ];
    $focusClass = $focusColors[$color] ?? $focusColors['emerald'];
@endphp

<div class="space-y-2">
    @if($label)
    <label for="{{ $name }}" class="block text-sm font-medium text-db-text-secondary">
        {{ $label }}
        @if($required)
        <span class="text-red-400">*</span>
        @endif
    </label>
    @endif

    <select
        name="{{ $name }}"
        id="{{ $name }}"
        {{ $required ? 'required' : '' }}
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge([
            'class' => 'w-full px-4 py-2.5 bg-db-surface border rounded-xl text-db-text-primary text-sm focus:outline-none focus:ring-2 transition-colors appearance-none cursor-pointer ' .
                       ($error ? 'border-red-500/50 focus:border-red-500 focus:ring-red-500/50' : 'border-db-border ' . $focusClass) .
                       ($disabled ? ' opacity-50 cursor-not-allowed' : '')
        ]) }}
        style="background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 24 24%27 stroke=%27%2371717a%27%3e%3cpath stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M19 9l-7 7-7-7%27/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.25rem;"
    >
        @if($placeholder)
        <option value="" disabled {{ !$selected ? 'selected' : '' }}>{{ $placeholder }}</option>
        @endif

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

    @if($helper && !$error)
    <p class="text-xs text-db-text-muted">{{ $helper }}</p>
    @endif

    @if($error)
    <p class="text-xs text-red-400">{{ $error }}</p>
    @endif
</div>