import { motion } from 'framer-motion';

export default function PlanetView({ planet, onClick }) {
  return (
    <motion.div
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      onClick={onClick}
      className="relative cursor-pointer"
    >
      <div className="w-32 h-32 md:w-48 md:h-48 bg-gradient-to-b from-space-blue to-space-purple rounded-full flex items-center justify-center border-4 border-space-gold/20 shadow-lg shadow-space-blue/20">
        <div className="text-center">
          <div className="text-2xl font-bold text-space-gold">{planet.name}</div>
          <div className="text-xs text-space-blue/70 mt-1">Level {planet.level}</div>
        </div>
      </div>
      {planet.unlocked && (
        <motion.div
          animate={{ scale: [1, 1.2, 1] }}
          transition={{ duration: 2, repeat: Infinity }}
          className="absolute -top-2 -right-2 w-6 h-6 bg-space-gold rounded-full flex items-center justify-center text-xs font-bold text-space-dark"
        >
          {planet.level}
        </motion.div>
      )}
    </motion.div>
  );
}