import React from "react";
import {
  Box,
  Container,
  Flex,
  Heading,
  SimpleGrid,
  Text,
} from "@chakra-ui/react";
import { Icon } from "@chakra-ui/icon";
import { FaJava, FaDatabase, FaCloud, FaServer } from "react-icons/fa";
import { motion } from "framer-motion";

interface SkillData {
  name: string;
  level: number;
}

interface SkillCategoryProps {
  title: string;
  icon: React.ReactNode;
  skills: SkillData[];
}

const SkillCategory = ({ title, icon, skills }: SkillCategoryProps) => {
  const bgColor = "gray.50";
  const borderColor = "gray.200";
  const titleColor = "blue.600";

  return (
    <Box
      borderWidth="1px"
      borderRadius="lg"
      borderColor={borderColor}
      p={6}
      bg={bgColor}
      boxShadow="md"
      _hover={{ transform: "translateY(-5px)", transition: "all 0.3s ease" }}
    >
      <Flex align="center" mb={4}>
        {icon}
        <Heading size="md" ml={2} color={titleColor}>
          {title}
        </Heading>
      </Flex>
      <Box bg="gray.200" h="1px" w="100%" mb={4}></Box>
      {skills.map((skill, index) => (
        <Box key={index} mb={4}>
          <Flex justify="space-between" mb={1}>
            <Text fontWeight="medium">{skill.name}</Text>
            <Text fontWeight="medium">{skill.level}%</Text>
          </Flex>
          <Box 
            w="100%" 
            h="8px" 
            bg="gray.100" 
            borderRadius="full" 
            position="relative" 
            overflow="hidden"
          >
            <Box
              position="absolute"
              h="100%"
              w={`${skill.level}%`}
              bg="blue.500"
              borderRadius="full"
            />
          </Box>
        </Box>
      ))}
    </Box>
  );
};

const Skills = () => {
  const headingColor = "gray.700";
  const textColor = "gray.600";

  const javaSkills = [
    { name: "Java Core", level: 95 },
    { name: "Spring Boot", level: 90 },
    { name: "Spring Cloud", level: 85 },
    { name: "Microservices", level: 88 },
    { name: "JPA/Hibernate", level: 85 }
  ];

  const databaseSkills = [
    { name: "MySQL", level: 90 },
    { name: "PostgreSQL", level: 85 },
    { name: "MongoDB", level: 80 },
    { name: "Redis", level: 88 },
    { name: "Oracle", level: 75 }
  ];

  const bigDataSkills = [
    { name: "Hadoop", level: 85 },
    { name: "Spark", level: 80 },
    { name: "Kafka", level: 88 },
    { name: "Flink", level: 78 },
    { name: "Hive", level: 82 }
  ];

  const cloudSkills = [
    { name: "Docker", level: 90 },
    { name: "Kubernetes", level: 82 },
    { name: "AWS", level: 78 },
    { name: "Azure", level: 75 },
    { name: "CI/CD", level: 85 }
  ];

  return (
    <Box py={20} id="skills">
      <Container maxW="7xl">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Heading
            mb={2}
            fontSize={{ base: "3xl", md: "4xl" }}
            fontWeight="bold"
            textAlign="center"
            color={headingColor}
          >
            专业技能
          </Heading>
          <Text
            fontSize="xl"
            textAlign="center"
            mb={10}
            color={textColor}
            maxW="3xl"
            mx="auto"
          >
            多年的企业级Java开发和大数据处理经验，专注于构建高性能、高可用的系统
          </Text>

          <SimpleGrid columns={{ base: 1, md: 2 }} gap={8}>
            <SkillCategory
              title="Java后台开发"
              icon={<Icon as={FaJava as any} boxSize="24px" color="#5382a1" />}
              skills={javaSkills}
            />
            <SkillCategory
              title="数据库技术"
              icon={<Icon as={FaDatabase as any} boxSize="24px" color="#f29111" />}
              skills={databaseSkills}
            />
            <SkillCategory
              title="大数据技术"
              icon={<Icon as={FaServer as any} boxSize="24px" color="#e25a1c" />} 
              skills={bigDataSkills}
            />
            <SkillCategory
              title="云原生 & DevOps"
              icon={<Icon as={FaCloud as any} boxSize="24px" color="#1c9be2" />}
              skills={cloudSkills}
            />
          </SimpleGrid>
        </motion.div>
      </Container>
    </Box>
  );
};

export default Skills; 