@props([
    'number',
    'name',
    'label',
    'options',
    'value' => null,
])

<div x-data="{ val: @js((string) $value) }">
    <h3 class="font-display text-base font-bold text-navy-900">
        {{ $number }}. {{ $label }} <span class="text-rose-600">*</span>
    </h3>
    <input type="hidden" name="{{ $name }}" :value="val">

    <div class="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-5">
        @foreach ($options as $score => $optionLabel)
            <button type="button" @click="val = '{{ $score }}'"
                    :class="val == '{{ $score }}'
                        ? 'bg-wise-500 text-white shadow-wise ring-2 ring-wise-500'
                        : 'bg-white text-navy-700 ring-1 ring-navy-100 hover:-translate-y-0.5 hover:ring-wise-300'"
                    class="flex min-h-24 flex-col items-center justify-center rounded-2xl p-3 text-center transition duration-200">
                <span class="font-display text-xl font-extrabold" :class="val == '{{ $score }}' ? 'text-white' : 'text-navy-900'">{{ $score }}</span>
                <span class="mt-1 text-xs font-semibold leading-tight" :class="val == '{{ $score }}' && 'text-wise-100'">{{ $optionLabel }}</span>
                <x-icon name="check-circle" class="mt-1.5 h-4 w-4" x-show="val == '{{ $score }}'" x-cloak />
            </button>
        @endforeach
    </div>

    @error($name)
        <p class="mt-2 text-sm font-medium text-rose-600">Please choose a rating.</p>
    @enderror
</div>