@props(['rating' => 5, 'reviews' => null, 'size' => 'h-3.5 w-3.5'])

<div class="flex items-center gap-1.5" aria-label="Rated {{ $rating }} out of 5">
    <div class="flex items-center gap-0.5">
        @for ($i = 1; $i <= 5; $i++)
            <x-icon name="star" :class="$size . ' ' . ($i <= round($rating) ? 'text-gold-500' : 'text-sand-300')" />
        @endfor
    </div>
    @if (!is_null($reviews))
        <span class="text-xs text-ink-500">{{ number_format($reviews) }} reviews</span>
    @endif
</div>