"use client";
import { motion } from "framer-motion";
import { Rocket } from "lucide-react";
import { EventCardProps } from "@/types/space"


export default function EventCard({ title, targetDate, icon }: EventCardProps) {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="relative p-6 rounded-xl border border-slate-800 bg-slate-900/50 backdrop-blur-md overflow-hidden group"
    >
      <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
      
      <div className="flex items-center gap-4 mb-4">
        <div className="p-2 bg-blue-500/10 rounded-lg text-blue-400">
          {icon || <Rocket size={20} />}
        </div>
        <h3 className="text-slate-300 font-mono tracking-widest uppercase text-sm">{title}</h3>
      </div>

      <div className="text-4xl font-mono text-white flex gap-2">
        <span>02</span><span className="text-slate-500">:</span>
        <span>14</span><span className="text-slate-500">:</span>
        <span>55</span>
      </div>
      
      <p className="text-xs text-slate-500 mt-2 font-mono uppercase">T-Minus to Horizon</p>
    </motion.div>
  );
}