import React from 'react';
import { motion } from 'framer-motion';
import type { Experience } from '../../../shared/types';

interface TimelineItemProps {
  experience: Experience;
  index: number;
  isLast: boolean;
}

export const TimelineItem: React.FC<TimelineItemProps> = ({
  experience,
  index,
  isLast,
}) => {
  const isEven = index % 2 === 0;

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      className="relative"
    >
      {/* Timeline dot and line */}
      <div className="absolute left-1/2 transform -translate-x-1/2">
        <motion.div
          initial={{ scale: 0 }}
          whileInView={{ scale: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.4, delay: index * 0.1 + 0.2 }}
          className="w-4 h-4 bg-green-500 rounded-full border-4 border-black"
        />
        {!isLast && (
          <div className="w-1 h-32 bg-gradient-to-b from-green-500 to-transparent mx-auto -mt-4"></div>
        )}
      </div>

      {/* Content */}
      <div
        className={`w-full md:w-5/12 ${isEven ? 'md:ml-0 md:text-right' : 'md:ml-auto'}`}
      >
        <motion.div
          whileHover={{ scale: 1.02, boxShadow: '0 10px 30px rgba(34,197,94,0.15)' }}
          transition={{ type: 'spring', stiffness: 300 }}
          className="p-6 rounded-xl border border-green-500/30 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm"
        >
          {/* Year Badge */}
          <div className="flex items-center gap-3 mb-4">
            <div className="px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50">
              <span className="text-green-400 font-bold text-sm">
                {experience.startYear}
                {experience.endYear ? `-${experience.endYear}` : '-Heute'}
              </span>
            </div>
          </div>

          {/* Position */}
          <h3 className="text-xl font-bold text-white mb-2">
            {experience.position}
          </h3>

          {/* Company */}
          {experience.company && (
            <p className="text-green-400 font-medium mb-3">{experience.company}</p>
          )}

          {/* Description */}
          <p className="text-gray-400 text-sm mb-4">{experience.description}</p>

          {/* Technologies */}
          {experience.technologies && (
            <div className="flex flex-wrap gap-2 justify-end">
              {experience.technologies.map((tech) => (
                <motion.span
                  key={tech}
                  whileHover={{ scale: 1.05, backgroundColor: 'rgba(34,197,94,0.2)' }}
                  transition={{ type: 'spring', stiffness: 300 }}
                  className="text-xs px-2 py-1 rounded border border-green-500/30 text-green-400 bg-green-500/10"
                >
                  {tech}
                </motion.span>
              ))}
            </div>
          )}
        </motion.div>
      </div>
    </motion.div>
  );
};
