"use client";
import { useState, useEffect } from 'react';
import { EventCardProps } from '@/types/space';

export default function EventCard({ title, targetDate, icon }: EventCardProps) {
  // 1. Setup the state to hold our strings
  const [timeLeft, setTimeLeft] = useState({ h: "00", m: "00", s: "00" });

  useEffect(() => {
    const updateTimer = () => {
      const now = new Date().getTime();
      const distance = targetDate.getTime() - now;

      // If the time has passed, keep it at zero
      if (distance < 0) {
        setTimeLeft({ h: "00", m: "00", s: "00" });
        return;
      }

      // Math to convert milliseconds to Hours, Minutes, and Seconds
      const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const s = Math.floor((distance % (1000 * 60)) / 1000);

      // 2. Update the state (padStart ensures we always see '05' instead of '5')
      setTimeLeft({
        h: h.toString().padStart(2, '0'),
        m: m.toString().padStart(2, '0'),
        s: s.toString().padStart(2, '0')
      });
    };

    // Run the timer every 1000ms (1 second)
    const interval = setInterval(updateTimer, 1000);
    
    // Call it once immediately so the user doesn't see 00:00:00 for the first second
    updateTimer(); 

    // Important: Clean up the timer if the component disappears
    return () => clearInterval(interval);
  }, [targetDate]);

  return (
    <div className="relative p-6 rounded-xl border border-slate-800 bg-slate-900/40 backdrop-blur-md overflow-hidden group">
      <div className="flex items-center gap-4 mb-4">
        <div className="p-2 bg-blue-500/10 rounded-lg text-blue-400">
          {icon}
        </div>
        <h3 className="text-slate-300 font-mono tracking-widest uppercase text-xs">
          {title}
        </h3>
      </div>

      <div className="text-4xl font-mono text-white flex gap-2">
        <span>{timeLeft.h}</span>
        <span className="text-slate-500">:</span>
        <span>{timeLeft.m}</span>
        <span className="text-slate-500">:</span>
        <span>{timeLeft.s}</span>
      </div>
      
      <p className="text-[10px] text-slate-500 mt-2 font-mono uppercase tracking-widest leading-none">
        T-Minus to Horizon
      </p>
    </div>
  );
}