'use client';
import { timelineEvents, TimelineEvent } from '@/lib/data';
import { cn } from '@/lib/utils';
import { Heart, Users, Video, Sparkles, Map, TrendingUp, Home } from 'lucide-react';

const ICONS: Record<string, React.ReactNode> = {
    Heart: <Heart className="w-5 h-5" />,
    Users: <Users className="w-5 h-5" />,
    Video: <Video className="w-5 h-5" />,
    Sparkles: <Sparkles className="w-5 h-5" />,
    Map: <Map className="w-5 h-5" />,
    TrendingUp: <TrendingUp className="w-5 h-5" />,
    Home: <Home className="w-5 h-5" />,
};

const getIcon = (iconName: string) => {
    return ICONS[iconName] || <Heart className="w-5 h-5" />;
}

const TimelineItem = ({ event, index }: { event: TimelineEvent; index: number }) => {
    const isLeft = index % 2 === 0;
    const isPresent = event.status === 'present';

    return (
        <div className="relative w-full my-12 flex justify-center group">
            {/* Center point */}
            <div className={cn(
                "absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 flex items-center justify-center transition-all duration-300",
                isPresent ? 'w-10 h-10' : 'w-8 h-8'
            )}>
                <div className={cn(
                    "rounded-full z-10 transition-all duration-300",
                    isPresent ? 'w-5 h-5 bg-primary' : 'w-3 h-3 bg-border group-hover:bg-primary/50'
                )}>
                    {isPresent && <div className="absolute w-5 h-5 bg-primary rounded-full animate-ping"></div>}
                </div>
            </div>
            
            <div className={cn("w-[calc(50%-2rem)] md:w-[calc(50%-2.5rem)]", isLeft ? "text-right" : "order-2 text-left")}>
                 <div className={cn(
                    "p-4 rounded-lg shadow-lg bg-card/80 backdrop-blur-sm border transition-all duration-300",
                    isLeft ? "mr-4" : "ml-4",
                    isPresent ? 'border-primary shadow-primary/20' : 'border-transparent group-hover:border-primary/30'
                 )}>
                    <div className={cn("flex items-start", isLeft ? "flex-row-reverse" : "flex-row")}>
                        <div className={cn(
                            "flex-shrink-0 bg-primary/20 text-primary p-2 rounded-md transition-transform duration-300 group-hover:rotate-6", 
                            isLeft ? "ml-4" : "mr-4"
                        )}>
                           {getIcon(event.icon)}
                       </div>
                       <div className="flex-grow">
                           <p className="text-sm font-semibold text-primary">{event.date}</p>
                           <h3 className="font-headline text-lg font-bold text-foreground">{event.title}</h3>
                           <p className="mt-1 font-body text-sm text-foreground/70">{event.description}</p>
                       </div>
                    </div>
                </div>
            </div>
             <div className="w-8 md:w-10 h-10 flex-shrink-0"></div>
            <div className={cn("w-[calc(50%-2rem)] md:w-[calc(50%-2.5rem)]", !isLeft && "order-1")}></div>
        </div>
    );
};


const Timeline = () => {
    return (
        <div className="relative">
            <div className="absolute h-full w-0.5 bg-border top-0 left-1/2 -translate-x-1/2"></div>
            <div className="py-4">
                 {timelineEvents.map((event, index) => (
                    <TimelineItem key={index} event={event} index={index} />
                ))}
            </div>
        </div>
    );
};

export default Timeline;