@props([
    'name',
    'label' => null,
    'value' => 0,
    'max' => 5,
    'style' => 'stars', // stars|emoji|numbers
    'allowHalf' => false,
    'readonly' => false,
    'help' => null,
    'error' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
    $emojis = ['😡', '😕', '😐', '🙂', '😍'];
@endphp

<x-forms.field :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="rating({ value: {{ $value }}, max: {{ (int) $max }}, allowHalf: {{ $allowHalf ? 'true' : 'false' }}, readonly: {{ $readonly ? 'true' : 'false' }} })"
         class="flex items-center gap-1">
        <input type="hidden" name="{{ $name }}" :value="value">
        @for ($i = 1; $i <= $max; $i++)
            @if ($style === 'emoji')
                <button type="button" @if ($readonly) tabindex="-1" @endif @click="set({{ $i }}, $event)"
                        class="text-2xl transition {{ $readonly ? 'cursor-default' : 'cursor-pointer opacity-40 hover:opacity-100' }}"
                        :class="value >= {{ $i }} && 'opacity-100'">
                    {{ $emojis[$i - 1] ?? '⭐' }}
                </button>
            @elseif ($style === 'numbers')
                <button type="button" @if ($readonly) tabindex="-1" @endif @click="set({{ $i }}, $event)"
                        class="grid h-8 w-8 place-items-center rounded-lg border text-sm font-semibold transition {{ $readonly ? 'cursor-default' : 'cursor-pointer' }}"
                        :class="value >= {{ $i }} ? 'border-primary bg-primary text-white' : 'border-slate-300 text-slate-500'">
                    {{ $i }}
                </button>
            @else
                <button type="button" @if ($readonly) tabindex="-1" @endif @click="set({{ $i }}, $event)" @mousemove="! readonly && (hover = {{ $i }})" @mouseleave="hover = null"
                        class="text-2xl transition {{ $readonly ? 'cursor-default' : 'cursor-pointer' }}"
                        :class="display({{ $i }}) === 'empty' ? 'text-slate-300' : 'text-accent'">
                    <i class="fa-solid" :class="display({{ $i }}) === 'half' ? 'fa-star-half-stroke' : 'fa-star'" aria-hidden="true"></i>
                </button>
            @endif
        @endfor
    </div>
</x-forms.field>