@props([
    'id',
    'label',
    'model',
    'options',
    'required' => true,
    'placeholder' => null,
    'default' => null,
    'icon' => null,
])

<div class="relative group">
    <div
        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg blur opacity-0 group-hover:opacity-20 transition duration-1000 group-hover:duration-200">
    </div>
    <div class="relative">
        <div class="flex items-center mb-2">
            @if ($icon)
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-700 dark:text-indigo-400 mr-2"
                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $icon }}" />
                </svg>
            @endif
            <label for="{{ $id }}"
                class="block text-sm font-medium text-gray-700 dark:text-gray-200">{{ $label }}</label>
            @if ($required)
                <span class="text-red-500"> *</span>
            @endif
        </div>
        <select id="{{ $id }}" name="{{ $id }}" x-model="{{ $model }}"
            {{ $required ? 'required' : '' }}
            class="peer w-full px-4 py-3 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-2 focus:ring-blue-300 dark:focus:ring-indigo-500 focus:border-blue-500 dark:focus:border-indigo-500 focus:outline-none transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            {{ $attributes }}>
            @if ($placeholder)
                <option value="" disabled>{{ $placeholder }}</option>
            @endif
            @foreach ($options as $option)
                <option value="{{ $option['value'] }}"
                    {{ old($id, $submission->data[$id] ?? $default) == $option['value'] ? 'selected' : '' }}>
                    {{ $option['label'] }}
                </option>
            @endforeach
        </select>
        @error($id)
            <p class="mt-1 text-red-500 dark:text-red-400 text-sm flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                {{ $message }}
            </p>
        @enderror
    </div>
</div>