import { motion } from 'framer-motion';

export default function GameStats({ stats }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="bg-space-dark/50 border border-space-blue/30 rounded-lg p-4 mb-8"
    >
      <h2 className="text-xl font-bold text-space-gold mb-4">Game Statistics</h2>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {stats.map((stat, index) => (
          <div key={index} className="text-center">
            <div className="text-2xl font-bold text-space-gold">{stat.value}</div>
            <div className="text-xs text-space-blue/70 mt-1">{stat.label}</div>
          </div>
        ))}
      </div>
    </motion.div>
  );
}