@php
    use App\Enums\Theme;

    $statePath = $getStatePath();
    $current = $getState();
@endphp

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
        @foreach (Theme::cases() as $theme)
            <label @class([
                'flex cursor-pointer flex-col gap-2 rounded-xl border p-3 transition',
                'border-primary-500 ring-2 ring-primary-500' => $current === $theme->value,
                'border-gray-200 dark:border-white/10' => $current !== $theme->value,
            ])>
                <input
                    type="radio"
                    class="sr-only"
                    wire:model.live="{{ $statePath }}"
                    value="{{ $theme->value }}"
                />
                <span class="flex gap-1">
                    @foreach ($theme->swatches() as $hex)
                        <span class="h-5 w-5 rounded-full ring-1 ring-black/10" style="background: {{ $hex }}"></span>
                    @endforeach
                </span>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-200">{{ $theme->label() }}</span>
            </label>
        @endforeach
    </div>
</x-dynamic-component>