import { motion } from 'framer-motion';
import { Briefcase, Calendar } from 'lucide-react';
import { useCVData } from '../admin/hooks/CVContext';

export default function Experience() {
  const { data } = useCVData();
  const { experience } = data;
  
  return (
    <section id="experience" className="py-20 px-6">
      <div className="max-w-4xl mx-auto">
        <motion.h2 
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          className="text-3xl font-bold text-slate-900 mb-12 text-center"
        >
          Berufserfahrung
        </motion.h2>
        
        <div className="relative">
          {experience.map((exp, index) => (
            <motion.div
              key={exp.id}
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.2 }}
              className="relative pl-8 pb-12 last:pb-0"
            >
              <div className="absolute left-0 top-2 w-4 h-4 rounded-full bg-primary-500 border-4 border-primary-100" />
              {index !== experience.length - 1 && (
                <div className="absolute left-[7px] top-6 w-0.5 h-full bg-slate-200" />
              )}
              
              <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
                <div className="flex flex-wrap items-start justify-between gap-2 mb-2">
                  <h3 className="text-xl font-semibold text-slate-900">{exp.role}</h3>
                  <span className="px-3 py-1 text-sm bg-primary-100 text-primary-700 rounded-full">
                    {exp.type}
                  </span>
                </div>
                
                <div className="flex items-center gap-4 text-slate-500 mb-4">
                  <span className="flex items-center gap-1">
                    <Briefcase size={16} />
                    {exp.company}
                  </span>
                  <span className="flex items-center gap-1">
                    <Calendar size={16} />
                    {exp.period}
                  </span>
                </div>
                
                <p className="text-slate-600 mb-4">{exp.description}</p>
                
                <ul className="space-y-2">
                  {exp.highlights.map((highlight, i) => (
                    <li key={i} className="flex items-start gap-2 text-slate-600">
                      <span className="text-primary-500 mt-1">•</span>
                      {highlight}
                    </li>
                  ))}
                </ul>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}