@props(['value' => 0, 'max' => 5, 'size' => 'md', 'readonly' => false, 'name' => 'rating', 'color' => 'yellow'])

@php
    $sizeClass = match($size) {
        'sm' => 'w-4 h-4',
        'md' => 'w-5 h-5',
        'lg' => 'w-6 h-6',
        default => 'w-5 h-5'
    };
    
    $colorClass = match($color) {
        'yellow' => 'text-yellow-400',
        'blue' => 'text-blue-500',
        'red' => 'text-red-500',
        'green' => 'text-green-500',
        'purple' => 'text-purple-500',
        default => 'text-yellow-400'
    };
@endphp

<div class="rating-component flex items-center" x-data="{ rating: {{ $value }}, hoverRating: 0, max: {{ $max }}, readonly: {{ $readonly ? 'true' : 'false' }} }">
    <div class="flex">
        <template x-for="i in max" :key="i">
            <button type="button"
                    class="focus:outline-none {{ $readonly ? 'cursor-default' : 'cursor-pointer' }}"
                    x-on:click="readonly ? null : rating = i"
                    x-on:mouseover="readonly ? null : hoverRating = i"
                    x-on:mouseleave="readonly ? null : hoverRating = 0">
                <svg xmlns="http://www.w3.org/2000/svg" 
                     :class="(hoverRating >= i || (!hoverRating && rating >= i)) ? '{{ $colorClass }}' : 'text-gray-300 dark:text-gray-600'"
                     class="{{ $sizeClass }} transition-colors duration-150"
                     fill="currentColor" 
                     viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
            </button>
        </template>
    </div>
    
    <input type="hidden" name="{{ $name }}" x-model="rating">
    
    <div class="ml-2 text-sm text-gray-600 dark:text-gray-400" x-show="rating > 0 && !readonly">
        <span x-text="rating"></span> من <span x-text="max"></span>
    </div>
</div>