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

export default function Education() {
  const { data } = useCVData();
  const { education } = data;
  
  return (
    <section id="education" 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"
        >
          Ausbildung
        </motion.h2>
        
        <div className="grid md:grid-cols-2 gap-6">
          {education.map((edu, index) => (
            <motion.div
              key={edu.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.2 }}
              className="bg-white rounded-xl p-6 shadow-sm border border-slate-100"
            >
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600">
                  <GraduationCap size={24} />
                </div>
                <div className="flex-1">
                  <h3 className="text-lg font-semibold text-slate-900">{edu.degree}</h3>
                  <p className="text-slate-600">{edu.institution}</p>
                  <div className="flex items-center gap-2 mt-2 text-slate-500 text-sm">
                    <Calendar size={14} />
                    <span>{edu.period}</span>
                  </div>
                  <span className="inline-block mt-2 px-2 py-1 text-xs bg-amber-100 text-amber-700 rounded">
                    {edu.status}
                  </span>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}