"use client";

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


const Starfield = dynamic(() => import('@/components/Starfield'), { 
  ssr: false 
});


export default function MissionControl({ iss, moon }: MissionControlProps) {
  
  const BASE_TIME = 1769610273000; 

  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: 'starlink',
      title: "Starlink Train",
      date: new Date(BASE_TIME + 1000 * 60 * 45),
      endDate: new Date(BASE_TIME + 1000 * 60 * 55),
      icon: <Rocket size={20} />,
    },
    {
      id: 'meteor',
      title: "Meteor Shower",
      date: new Date(BASE_TIME + 1000 * 60 * 60 * 24 * 10),
      endDate: new Date(BASE_TIME + 1000 * 60 * 60 * 24 * 10.1),
      icon: <Sparkles size={20} />,
    }
  ], [iss, moon]);

  return (
    <div className="relative min-h-screen flex flex-col items-center p-8 overflow-hidden">
      <Starfield />
      
      <header className="z-10 text-center mb-16 mt-10">
        <h1 className="text-4xl md:text-6xl font-mono font-bold text-white tracking-tighter mb-4 uppercase">
          Mission<span className="text-blue-500 font-black">Control</span>
        </h1>
        <p className="text-slate-400 font-mono text-xs tracking-[0.3em] uppercase opacity-70">
          Ground Station // [55.6761° N, 12.5683° E]
        </p>
      </header>

      <div className="z-10 grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-5xl">
        {events.map((event) => (
          <EventCard 
            key={`${event.id}-${event.date?.getTime()}`}
            id={event.id}
            title={event.title}
            targetDate={event.date}
            endDate={event.endDate}
            icon={event.icon}
          />
        ))}
      </div>
    </div>
  );
}