import React from 'react';
import { X, Orbit, Globe, Calendar, Wind, Thermometer } from 'lucide-react';

const PlanetInfo = ({ planet, onClose }) => {
  if (!planet) return null;

  const planetData = {
    mercury: {
      name: "Mercury",
      description: "The smallest planet in the Solar System and the closest to the Sun. It is only slightly larger than Earth's Moon.",
      facts: {
        diameter: "4,879 km",
        distance: "57.9 million km",
        orbit: "88 Earth days",
        temperature: "-173°C to 427°C",
        moons: "0"
      },
      color: "bg-gray-400"
    },
    venus: {
      name: "Venus",
      description: "The second planet from the Sun. It has a thick atmosphere that traps heat, making it the hottest planet.",
      facts: {
        diameter: "12,104 km",
        distance: "108.2 million km",
        orbit: "225 Earth days",
        temperature: "462°C",
        moons: "0"
      },
      color: "bg-yellow-200"
    },
    earth: {
      name: "Earth",
      description: "Our home planet! The third planet from the Sun and the only place we know of so far that’s inhabited by living things.",
      facts: {
        diameter: "12,742 km",
        distance: "149.6 million km",
        orbit: "365.25 days",
        temperature: "-88°C to 58°C",
        moons: "1"
      },
      color: "bg-blue-400"
    },
    mars: {
      name: "Mars",
      description: "The fourth planet from the Sun and the second-smallest planet. It's often called the 'Red Planet'.",
      facts: {
        diameter: "6,779 km",
        distance: "227.9 million km",
        orbit: "687 Earth days",
        temperature: "-113°C to 35°C",
        moons: "2"
      },
      color: "bg-red-500"
    },
    jupiter: {
      name: "Jupiter",
      description: "The largest planet in the Solar System. A gas giant with a mass one-thousandth that of the Sun.",
      facts: {
        diameter: "139,820 km",
        distance: "778.5 million km",
        orbit: "11.86 Earth years",
        temperature: "-108°C",
        moons: "79"
      },
      color: "bg-orange-200"
    },
    saturn: {
      name: "Saturn",
      description: "The sixth planet from the Sun and the second-largest. It's famous for its prominent ring system.",
      facts: {
        diameter: "116,460 km",
        distance: "1.4 billion km",
        orbit: "29.45 Earth years",
        temperature: "-139°C",
        moons: "82"
      },
      color: "bg-yellow-100"
    },
    uranus: {
      name: "Uranus",
      description: "The seventh planet from the Sun. It has the third-largest planetary radius and fourth-largest planetary mass.",
      facts: {
        diameter: "50,724 km",
        distance: "2.9 billion km",
        orbit: "84 Earth years",
        temperature: "-197°C",
        moons: "27"
      },
      color: "bg-cyan-300"
    },
    neptune: {
      name: "Neptune",
      description: "The eighth and farthest-known solar planet from the Sun. It's known for its strong winds.",
      facts: {
        diameter: "49,244 km",
        distance: "4.5 billion km",
        orbit: "164.8 Earth years",
        temperature: "-201°C",
        moons: "14"
      },
      color: "bg-blue-500"
    }
  };

  const data = planetData[planet.toLowerCase()] || planetData.earth;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
      <div className="bg-gray-900 rounded-2xl border border-white/10 w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl">
        <div className="relative">
          <div className={`h-32 ${data.color} relative overflow-hidden`}>
            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-gray-900/80" />
            <button 
              onClick={onClose}
              className="absolute top-4 right-4 text-white/70 hover:text-white p-2 rounded-full hover:bg-white/10"
            >
              <X className="h-6 w-6" />
            </button>
            <div className="absolute bottom-6 left-6">
              <h2 className="text-4xl font-bold text-white mb-2">{data.name}</h2>
              <p className="text-white/80 text-lg max-w-xl">{data.description}</p>
            </div>
          </div>
          
          <div className="p-6">
            <h3 className="text-xl font-semibold text-white mb-4">Key Statistics</h3>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div className="bg-gray-800/50 p-4 rounded-xl">
                <Globe className="h-6 w-6 text-blue-400 mb-2" />
                <p className="text-gray-400 text-sm">Diameter</p>
                <p className="text-white font-medium">{data.facts.diameter}</p>
              </div>
              <div className="bg-gray-800/50 p-4 rounded-xl">
                <Orbit className="h-6 w-6 text-purple-400 mb-2" />
                <p className="text-gray-400 text-sm">Distance from Sun</p>
                <p className="text-white font-medium">{data.facts.distance}</p>
              </div>
              <div className="bg-gray-800/50 p-4 rounded-xl">
                <Calendar className="h-6 w-6 text-green-400 mb-2" />
                <p className="text-gray-400 text-sm">Orbit Period</p>
                <p className="text-white font-medium">{data.facts.orbit}</p>
              </div>
              <div className="bg-gray-800/50 p-4 rounded-xl">
                <Thermometer className="h-6 w-6 text-red-400 mb-2" />
                <p className="text-gray-400 text-sm">Temperature</p>
                <p className="text-white font-medium">{data.facts.temperature}</p>
              </div>
              <div className="bg-gray-800/50 p-4 rounded-xl">
                <Wind className="h-6 w-6 text-cyan-400 mb-2" />
                <p className="text-gray-400 text-sm">Moons</p>
                <p className="text-white font-medium">{data.facts.moons}</p>
              </div>
            </div>
            
            <div className="mt-8 p-6 bg-gradient-to-r from-blue-900/20 to-purple-900/20 rounded-xl border border-white/5">
              <h3 className="text-lg font-medium text-white mb-2">Did You Know?</h3>
              <p className="text-gray-300">
                {planet.toLowerCase() === 'venus' && "Venus is the hottest planet in our solar system, with surface temperatures around 462°C (864°F), hot enough to melt lead!"}
                {planet.toLowerCase() === 'jupiter' && "Jupiter is so large that all the other planets in the solar system could fit inside it!"}
                {planet.toLowerCase() === 'saturn' && "Saturn's rings are made mostly of ice particles, with some rock and dust mixed in."}
                {planet.toLowerCase() === 'earth' && "Earth is the only planet known to support life and the only one with liquid water on its surface."}
                {planet.toLowerCase() === 'mars' && "Mars is home to Olympus Mons, the tallest volcano in the solar system, standing nearly 22 km (13.6 miles) high."}
                {planet.toLowerCase() === 'mercury' && "Mercury is the smallest planet and has the most extreme temperature swings, from -173°C to 427°C."}
                {planet.toLowerCase() === 'uranus' && "Uranus rotates on its side, with its axis tilted at 98 degrees, making it unique among the planets."}
                {planet.toLowerCase() === 'neptune' && "Neptune has the strongest winds in the solar system, reaching speeds of up to 2,100 km/h (1,300 mph)."}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PlanetInfo;