"use client";

import { useMemo } from 'react';
import EventCard from '@/components/EventCard';
import { Satellite, Rocket, Moon, Sparkles } from 'lucide-react';
import { MissionControlProps } from '@/types/space';
import { motion } from 'framer-motion';


export default function MissionControl({ iss, moon, cosmic, launch }: MissionControlProps) {
  const events = useMemo(() => [
    {
      id: 'iss',
      title: "ISS Overhead: Home",
      date: iss.start,
      endDate: iss.end,
      icon: <Satellite size={20} />,
    },
    {
      id: 'moon',
      title: moon.title,
      date: moon.start,
      endDate: moon.end,
      icon: <Moon size={20} />,
    },
    {
      id: 'cosmic',
      title: cosmic.title,
      date: cosmic.start,
      endDate: cosmic.end,
      icon: <Sparkles size={20} />,
    },
    {
      id: 'launch',
      title: launch.title,
      date: launch.start,
      endDate: launch.end,
      icon: <Rocket size={20} />,
    }
  ], [iss, moon, cosmic, launch]);

  return (
    <div className="relative flex flex-col items-center p-8 overflow-hidden">
      <div className="z-10 grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-10 w-full max-w-5xl">
        {events.map((event, index) => (
            <motion.div 
                key={event.id}
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ 
                duration: 1.2, 
                delay: index * 0.15,
                ease: [0.16, 1, 0.3, 1]
                }}
                className="flex flex-col gap-3"
            >
          <div key={event.id} className="flex flex-col gap-3">
            <div className="flex items-center gap-2 px-1">
                <div className="h-[1px] w-4 bg-blue-500/50" />
                <span className="text-[10px] font-bold font-mono tracking-[0.2em] text-blue-400/70 uppercase">
                    {event.id === 'iss' && "ISS Zenith // CPH"}
                    {event.id === 'moon' && "Lunar Cycle"}
                    {event.id === 'cosmic' && "Celestial Event"}
                    {event.id === 'launch' && "Launch Schedule"}
                </span>
          </div>
          <EventCard 
            id={event.id}
            title={event.title}
            targetDate={event.date}
            endDate={event.endDate}
            icon={event.icon}
          />
          </div>
          </motion.div>
        ))}
      </div>
    </div>
  );
}