import React from 'react';
import { motion } from 'framer-motion';
import { experienceData } from '../data/experienceData';
import { TimelineItem } from './TimelineItem';
import AnimatedSection from '../../../shared/components/AnimatedSection';

export const ExperienceSection: React.FC = () => {
  return (
    <AnimatedSection id="experience" className="py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto">
        {/* Section Header */}
        <div className="text-center mb-16">
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="inline-block px-4 py-2 rounded-full border border-green-500/50 bg-green-500/10 mb-6"
          >
            <span className="text-green-400 text-sm font-medium">Mein Weg</span>
          </motion.div>

          <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
            Berufserfahrung
          </h2>
          <p className="text-gray-400 text-lg">
            Eine Übersicht meiner beruflichen Stationen und Erfolge
          </p>
        </div>

        {/* Timeline */}
        <div className="relative">
          {experienceData.map((experience, index) => (
            <TimelineItem
              key={experience.id}
              experience={experience}
              index={index}
              isLast={index === experienceData.length - 1}
            />
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
};
