---
interface Props {
    averageRating: number;
    totalReviews: number;
}

const { averageRating, totalReviews } = Astro.props;

// Массив для отрисовки звезд (1..5)
const stars = [1, 2, 3, 4, 5];
---

<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8 text-center border border-gray-100 transition-shadow duration-300 hover:shadow-2xl">
    <div class="flex flex-col md:flex-row items-center justify-center gap-6">

        {/* Цифра рейтинга */}
        <div>
            <div class="text-5xl md:text-6xl font-extrabold text-gray-800">
                {averageRating.toFixed(1)}
            </div>
            <div class="text-gray-500 text-sm mt-1 uppercase tracking-wide">Durchschnitt</div>
        </div>

        {/* Разделитель (виден только на десктопе) */}
        <div class="hidden md:block w-px h-16 bg-gray-200"></div>

        {/* Звезды и кол-во */}
        <div class="text-left flex flex-col items-center md:items-start">
            <div class="flex space-x-1 mb-2">
                {stars.map((star) => (
                        <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 512 512"
                                class={`h-7 w-7 ${star <= Math.round(averageRating) ? 'text-[#FE9901]' : 'text-gray-300'}`}
                                fill="currentColor"
                        >
                            <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-17.82l49.1-151.05-128.77-93.55a16 16 0 019.38-28.84l159.05-.29L240.79 31.81a16 16 0 0130.42 0l49.18 153.64 159.05.29a16 16 0 019.38 28.84l-128.77 93.55 49.1 151.05A16 16 0 01394 480z"/>
                        </svg>
                ))}
            </div>
            <p class="text-gray-600 text-sm">
                Basierend auf <span class="font-bold text-gray-900">{totalReviews}</span> Bewertungen
            </p>
        </div>
    </div>
</div>