@props([
    'label' => 'Badge colour',
    'model',
    'options' => [],
])

<div {{ $attributes->class('space-y-2') }}>
    <label class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">
        {{ $label }}
    </label>

    <select
        wire:model="{{ $model }}"
        class="block h-10 w-full rounded-xl border border-zinc-300 bg-white px-3 text-sm font-semibold text-zinc-900 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
    >
        @foreach ($options as $key => $option)
            <option value="{{ $key }}" style="color: {{ $option['hex'] }};">
                ● {{ $option['name'] }} — {{ $option['hex'] }}
            </option>
        @endforeach
    </select>

    <div class="flex flex-wrap gap-1.5" aria-label="Available Helpdesk colours">
        @foreach ($options as $key => $option)
            <span
                title="{{ $option['name'] }} {{ $option['hex'] }}"
                class="inline-flex h-5 min-w-5 items-center justify-center rounded-full border border-white/70 shadow-sm ring-1 ring-zinc-900/10"
                style="background-color: {{ $option['hex'] }}"
            >
                <span class="sr-only">{{ $option['name'] }}</span>
            </span>
        @endforeach
    </div>
</div>