---
// Файл: src/components/reviews/ReviewsStats.astro
export interface StatItem {
  value: string;
  label: string;
  emoji: string;
}

interface Props {
  stats: StatItem[];
}

const { stats } = Astro.props;
---

<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
  {
    stats.map((stat) => (
      <div class="group bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 rounded-2xl p-6 text-center hover:border-[var(--color-gold)]/30 hover:shadow-lg hover:shadow-[var(--color-gold)]/5 transition-all duration-300">
        <div class="text-3xl mb-2 group-hover:scale-110 transition-transform">
          {stat.emoji}
        </div>
        <div class="text-3xl md:text-4xl font-black text-[var(--color-gold)] mb-1">
          {stat.value}
        </div>
        <div class="text-sm text-[var(--color-gray-500)]">{stat.label}</div>
      </div>
    ))
  }
</div>
