'use client'

import { motion } from 'framer-motion'
import { PitchMilestone, Language } from '@/lib/types'
import { CheckCircle2, Circle, Clock } from 'lucide-react'

interface TimelineProps {
  milestones: PitchMilestone[]
  lang: Language
}

export default function Timeline({ milestones, lang }: TimelineProps) {
  return (
    <div className="relative">
      {/* Line */}
      <div className="absolute left-6 top-0 bottom-0 w-px bg-gradient-to-b from-indigo-500 via-purple-500 to-white/10" />

      <div className="space-y-6">
        {milestones.map((m, i) => {
          const Icon = m.status === 'completed' ? CheckCircle2 : m.status === 'in_progress' ? Clock : Circle
          const iconColor = m.status === 'completed'
            ? 'text-green-400'
            : m.status === 'in_progress'
            ? 'text-yellow-400'
            : 'text-white/30'

          const date = new Date(m.milestone_date)
          const dateStr = date.toLocaleDateString(lang === 'de' ? 'de-DE' : 'en-US', {
            month: 'short',
            year: 'numeric',
          })

          return (
            <motion.div
              key={m.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.1 }}
              className="relative flex items-start gap-4 pl-2"
            >
              <div className={`relative z-10 p-1 rounded-full bg-[#0a0a1a] ${iconColor}`}>
                <Icon className="w-6 h-6" />
              </div>
              <div className="flex-1 pb-2">
                <div className="flex items-center gap-3 mb-1">
                  <span className="text-xs font-mono text-white/40">{dateStr}</span>
                  {m.status === 'in_progress' && (
                    <span className="text-xs px-2 py-0.5 rounded-full bg-yellow-500/20 text-yellow-400">
                      In Progress
                    </span>
                  )}
                </div>
                <h4 className="font-semibold text-white">
                  {lang === 'de' ? m.title_de : m.title_en}
                </h4>
                <p className="text-sm text-white/50 mt-0.5">
                  {lang === 'de' ? m.description_de : m.description_en}
                </p>
              </div>
            </motion.div>
          )
        })}
      </div>
    </div>
  )
}