<div x-data="{ previewName: @entangle('previewName') }"
     x-on:updatePreviewName.window="previewName = $event.detail || '{{ __('Category name') }}'">
    <label class="block text-sm font-medium text-gray-700 mb-1">
        {{ $label }}
    </label>

    <div class="relative">
        <select
            class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 pr-10 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
            wire:model.live="selectedColor">
            @foreach ($this->availableColors as $color)
                <option value="{{ $color['value'] }}">{{ $color['label'] }}</option>
            @endforeach
        </select>

        <!-- Color swatch preview -->
        <div class="pointer-events-none absolute inset-y-0 right-10 flex items-center pr-2">
            <span class="inline-block h-6 w-6 rounded border border-gray-300 bg-{{ $selectedColor }}-400"></span>
        </div>
    </div>

    <!-- Large color preview -->
    <div class="mt-2">
        <div class="text-sm text-gray-600 mb-1">{{ __('Preview') }}:</div>
        <span class="bg-{{ $selectedColor }}-400 inline-flex items-center rounded-md px-3 py-1.5 text-sm font-normal text-black" x-text="previewName"></span>
    </div>
</div>
