"use client";

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

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

// 1. Define the interface
interface MissionControlProps {
  initialIssPass: Date;
}

// 2. Accept the prop here
export default function MissionControl({ initialIssPass }: MissionControlProps) {
  
  const BASE_TIME = 1769610273000; 

  const events = useMemo(() => [
    {
      id: 'iss', // Add an ID to distinguish the ISS card
      title: "ISS Overhead: Home",
      date: initialIssPass, // Use the real data from SQLite here!
      icon: <Satellite size={20} />,
    },
    {
      id: 'moon',
      title: "Next Lunar Phase: Full",
      date: new Date(BASE_TIME + 1000 * 60 * 60 * 24 * 3), 
      icon: <Moon size={20} />,
    },
    {
      id: 'starlink',
      title: "Starlink Train",
      date: new Date(BASE_TIME + 1000 * 60 * 45),
      icon: <Rocket size={20} />,
    },
    {
      id: 'meteor',
      title: "Meteor Shower",
      date: new Date(BASE_TIME + 1000 * 60 * 60 * 24 * 10),
      icon: <Sparkles size={20} />,
    }
  ], [initialIssPass]); // Re-memoize if the pass updates

  return (
    <div className="relative min-h-screen flex flex-col items-center p-8 overflow-hidden bg-[#020617]">
      <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}
            title={event.title}
            targetDate={event.date} // This now correctly uses the specific date for each card
            icon={event.icon}
          />
        ))}
      </div>
    </div>
  );
}