import { motion } from 'framer-motion';

export default function ResourceDisplay({ resources }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
      {resources.map((resource) => (
        <motion.div
          key={resource.name}
          whileHover={{ scale: 1.05 }}
          className="bg-space-dark/50 border border-space-blue/30 rounded-lg p-4 text-center"
        >
          <div className="flex justify-center mb-2">
            <resource.icon className="text-space-gold" size={32} />
          </div>
          <h3 className="text-lg font-semibold text-space-gold mb-1">{resource.name}</h3>
          <p className="text-space-blue/80">{resource.amount.toLocaleString()}</p>
          <p className="text-xs text-space-blue/60 mt-1">
            +{resource.perSecond.toFixed(1)}/s
          </p>
        </motion.div>
      ))}
    </div>
  );
}