@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 gap-2 sm:grid-cols-5">
        @foreach ($options as $score => $optionLabel)
            <button type="button" @click="val = '{{ $score }}'"
                    :class="val == '{{ $score }}'
                        ? 'border-wise-400 bg-wise-50 text-wise-700 ring-2 ring-wise-300'
                        : 'border-navy-200 bg-white text-navy-700 hover:bg-navy-50'"
                    class="flex min-h-24 flex-col items-center justify-center rounded-xl border p-3 text-center transition">
                <span class="font-display text-xl font-bold">{{ $score }}</span>
                <span class="mt-1 text-xs font-semibold leading-tight">{{ $optionLabel }}</span>
            </button>
        @endforeach
    </div>

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