import { motion } from 'framer-motion';
import { useCVData } from '../admin/hooks/CVContext';

const skillIcons = {
  "Docker": "🐳",
  "Kubernetes": "☸️",
  "Helm": "⛵",
  "Jenkins": "🔧",
  "Bitbucket": "📘",
  "ArgoCD": "🔄",
  "Git": "📝",
  "Azure": "☁️",
  "Azure Resource Manager": "🏗️",
  "Release Engineering": "🚀",
  "Linux Administration": "🐧",
  "Python": "🐍",
  "Bash": "💻",
  "Rust": "🦀"
};

export default function Skills() {
  const { data } = useCVData();
  const { skills } = data;
  
  return (
    <section id="skills" className="py-20 px-6 bg-white">
      <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"
        >
          Skills
        </motion.h2>
        
        <div className="grid md:grid-cols-2 gap-8">
          {Object.entries(skills).map(([category, items], catIndex) => (
            <motion.div
              key={category}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: catIndex * 0.1 }}
              className="bg-slate-50 rounded-xl p-6"
            >
              <h3 className="text-lg font-semibold text-primary-600 mb-4">
                {category}
              </h3>
              <div className="flex flex-wrap gap-2">
                {items.map((skill, i) => (
                  <motion.span
                    key={skill}
                    initial={{ opacity: 0, scale: 0.8 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ delay: i * 0.05 }}
                    whileHover={{ scale: 1.05 }}
                    className="px-3 py-1.5 bg-white rounded-lg text-sm text-slate-700 shadow-sm border border-slate-100 flex items-center gap-1.5 cursor-default"
                  >
                    {skillIcons[skill] && <span>{skillIcons[skill]}</span>}
                    {skill}
                  </motion.span>
                ))}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}