import React from 'react';
import { motion } from 'framer-motion';
import { iconMap } from '../data/skillsData';
import type { Skill } from '../../../shared/types';

interface SkillCardProps {
  skill: Skill & { iconName: keyof typeof iconMap };
  index: number;
}

export const SkillCard: React.FC<SkillCardProps> = ({ skill, index }) => {
  const levelColors = {
    Expert: 'text-green-500',
    Advanced: 'text-emerald-400',
    Intermediate: 'text-cyan-400',
    Beginner: 'text-blue-400',
  };

  const levelBg = {
    Expert: 'bg-green-500/20',
    Advanced: 'bg-emerald-500/20',
    Intermediate: 'bg-cyan-500/20',
    Beginner: 'bg-blue-500/20',
  };

  const IconComponent = iconMap[skill.iconName];

  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.45, delay: index * 0.08, ease: 'easeOut' }}
      whileHover={{ scale: 1.025, y: -6, boxShadow: '0 20px 60px -40px rgba(34,197,94,0.75)' }}
      className="p-6 rounded-3xl border border-green-500/25 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm"
    >
      <div className="flex items-start justify-between mb-4">
        <motion.div
          className="p-3 rounded-2xl bg-green-500/15"
          whileHover={{ scale: 1.1, rotate: 5 }}
          transition={{ type: 'spring', stiffness: 300 }}
        >
          {IconComponent && <IconComponent className="text-green-500" size={24} />}
        </motion.div>
        <span className={`text-xs font-semibold px-3 py-1 rounded-full ${levelBg[skill.level]}`}>
          <span className={levelColors[skill.level]}>{skill.level}</span>
        </span>
      </div>

      <h3 className="text-lg font-bold text-white mb-3">{skill.name}</h3>

      <div className="space-y-3">
        <div className="flex items-center justify-between text-sm">
          <span className="text-gray-400">Erfahrung</span>
          <span className="text-green-400 font-medium">{skill.years}+ Jahre</span>
        </div>

        <div className="h-2 bg-gray-800 rounded-full overflow-hidden">
          <motion.div
            initial={{ width: 0 }}
            whileInView={{ width: `${Math.min((skill.years / 5) * 100, 100)}%` }}
            viewport={{ once: true }}
            transition={{ duration: 0.9, delay: index * 0.1 + 0.2 }}
            className="h-full bg-gradient-to-r from-green-500 to-emerald-500"
          />
        </div>
      </div>
    </motion.div>
  );
};
