@props([
    'rating'    => 0,
    'count'     => 0,
    'showCount' => false,
    'size'      => 24,
])

<div class="flex items-center gap-3" {{ $attributes }}>

    <div
        class="flex items-center gap-1.5 text-brand"
        role="img"
        aria-label="{{ $rating }} out of 5 stars"
    >
        @for ($i = 1; $i <= 5; $i++)
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 23 21"
                fill="{{ $i <= $rating ? 'currentColor' : 'none' }}"
                stroke="currentColor"
                style="width: {{ $size }}px; height: {{ $size }}px; flex-shrink: 0;"
                aria-hidden="true"
            >
                <path d="m15.054 0 .689 4.894 5.057-.883-2.435 4.348L23 10.5l-4.635 2.141 2.435 4.348-5.061-.883L15.054 21 11.5 17.43 7.946 21l-.689-4.894-5.057.883 2.438-4.348L0 10.5l4.635-2.141L2.2 4.011l5.061.883L7.946 0 11.5 3.57Z"/>
                <path d="m14.34389687 2.13050652-2.84388733 2.85695266-2.84390736-2.85695076-.55294228 3.92571163-4.0049181-.69867801 1.93777848 3.45510769L2.38412858 10.5l3.6518917 1.68735027-1.9377842 3.4551077 4.00493431-.69867802.55292607 3.92570781L11.5 16.01253891l2.84389782 2.85694885.55294228-3.92570781 4.00492382.69867801-1.9377842-3.45510769L20.61587142 10.5l-3.6518917-1.68735027 1.9377842-3.4551077-4.00492382.69867802-.55294323-3.92571353M7.94631004 0l3.5536995 3.5699997L15.05368996 0l.68924999 4.89351082 5.06075954-.88287163-2.43848037 4.34787083L23 10.5l-4.63478088 2.14148998 2.43848037 4.34787083-5.06075954-.88286972L15.05368995 21 11.5 17.4300003 7.94629955 21l-.6892395-4.89350891-5.06075954.88286972 2.43848037-4.34787083L0 10.5l4.63478088-2.14148998-2.43847084-4.34787083 5.06075001.88287163L7.94631005 0Z"/>
            </svg>
        @endfor
    </div>

    @if ($showCount && $count > 0)
        <span class="text-sm text-neutral-500">
            ({{ trans_choice('storefront.customer_reviews', $count, ['count' => $count]) }})
        </span>
    @endif

</div>