import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { skillsData } from '../data/skillsData';
import { SkillCard } from './SkillCard';
import AnimatedSection from '../../../shared/components/AnimatedSection';

type Category =
  | 'Alle'
  | 'Frontend'
  | 'Backend'
  | 'Tools'
  | 'Design'
  | 'Architektur'
  | 'Kreativ';

export const SkillsSection: React.FC = () => {
  const [selectedCategory, setSelectedCategory] = useState<Category>('Alle');

  const categories: Category[] = [
    'Alle',
    'Frontend',
    'Backend',
    'Tools',
    'Design',
    'Architektur',
    'Kreativ',
  ];

  const filteredSkills = skillsData.filter(
    (skill) => selectedCategory === 'Alle' || skill.category === selectedCategory
  );

  return (
    <AnimatedSection id="skills" className="py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl 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">Meine Expertise</span>
          </motion.div>

          <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
            Fähigkeiten & Technologien
          </h2>
          <p className="text-gray-400 text-lg max-w-2xl mx-auto">
            Ein Überblick über meine technischen Fähigkeiten und Erfahrungsstufen.
          </p>
        </div>

        {/* Category Filter */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="flex flex-wrap justify-center gap-3 mb-12"
        >
          {categories.map((category) => (
            <motion.button
              key={category}
              onClick={() => setSelectedCategory(category)}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              animate={{
                backgroundColor:
                  selectedCategory === category ? 'rgba(34,197,94,1)' : 'transparent',
                borderColor:
                  selectedCategory === category
                    ? 'rgba(34,197,94,1)'
                    : 'rgba(34,197,94,0.3)',
              }}
              transition={{ duration: 0.2 }}
              className={`px-6 py-2 rounded-full font-medium ${
                selectedCategory === category
                  ? 'text-black'
                  : 'border border-green-500/30 text-gray-300'
              }`}
            >
              {category}
            </motion.button>
          ))}
        </motion.div>

        {/* Skills Grid */}
        <motion.div
          layout
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
        >
          {filteredSkills.map((skill, index: number) => (
            <SkillCard key={skill.name} skill={skill} index={index} />
          ))}
        </motion.div>
      </div>
    </AnimatedSection>
  );
};
