@props(['rating' => 0, 'count' => null, 'size' => 'small'])

@php
    $fullStars = floor($rating);
    $hasHalfStar = $rating - $fullStars >= 0.5;
    $emptyStars = 5 - $fullStars - ($hasHalfStar ? 1 : 0);

    $starSize = match($size) {
        'large' => 'w-5 h-5',
        'medium' => 'w-4 h-4',
        default => 'w-3.5 h-3.5'
    };

    $textSize = match($size) {
        'large' => 'text-sm',
        'medium' => 'text-xs',
        default => 'text-xs'
    };
@endphp

<div class="flex items-center gap-1">
    <div class="flex items-center">
        {{-- Full Stars --}}
        @for ($i = 0; $i < $fullStars; $i++)
            <svg class="{{ $starSize }} text-yellow-400" 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>
        @endfor

        {{-- Half Star --}}
        @if ($hasHalfStar)
            <div class="relative {{ $starSize }}">
                <svg class="absolute text-zinc-300 dark:text-zinc-600" 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>
                <svg class="absolute text-yellow-400" fill="currentColor" viewBox="0 0 20 20" style="clip-path: inset(0 50% 0 0);">
                    <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>
            </div>
        @endif

        {{-- Empty Stars --}}
        @for ($i = 0; $i < $emptyStars; $i++)
            <svg class="{{ $starSize }} text-zinc-300 dark:text-zinc-600" 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>
        @endfor
    </div>

    {{-- Rating Number and Count --}}
    @if ($count !== null)
        <span class="{{ $textSize }} text-zinc-600 dark:text-zinc-400">
            {{ number_format($rating, 1) }} ({{ number_format($count) }})
        </span>
    @elseif ($rating > 0)
        <span class="{{ $textSize }} text-zinc-600 dark:text-zinc-400">
            {{ number_format($rating, 1) }}
        </span>
    @endif
</div>