import React from "react";
import {
  Box,
  Container,
  Heading,
  Text,
  Stack,
  Flex,
  Circle,
} from "@chakra-ui/react";
import { motion } from "framer-motion";

interface ExperienceItemProps {
  position: string;
  company: string;
  period: string;
  description: string;
}

const ExperienceItem = ({ position, company, period, description }: ExperienceItemProps) => {
  return (
    <Box mb={8} position="relative">
      <Flex align="center">
        <Circle size="40px" bg="blue.500" color="white" mr={4} fontSize="sm" fontWeight="bold">
          {period.split("-")[0]}
        </Circle>
        <Box>
          <Heading as="h3" size="md">
            {position}
          </Heading>
          <Text fontWeight="medium" color="blue.500">
            {company}
          </Text>
          <Text fontSize="sm" color="gray.500" mt={1}>
            {period}
          </Text>
        </Box>
      </Flex>
      <Box mt={4} ml="52px">
        <Text color="gray.600">{description}</Text>
      </Box>
    </Box>
  );
};

const Experience = () => {
  const experiences = [
    {
      position: "高级Java架构师",
      company: "某科技有限公司",
      period: "2020 - 至今",
      description:
        "负责公司核心业务系统的架构设计和技术选型，主导微服务架构重构和云原生改造，带领团队完成多个高并发、高可用的分布式系统开发。优化系统性能，解决系统扩展性问题，将系统响应时间提升40%，支持每日千万级交易量。",
    },
    {
      position: "大数据开发工程师",
      company: "某大数据公司",
      period: "2018 - 2020",
      description:
        "负责公司数据处理平台的开发和优化，主要使用Hadoop、Spark和Flink技术栈，设计实现了实时和离线数据处理流程，开发数据ETL过程，构建数据仓库，为企业提供数据分析支持。成功将数据处理延迟从小时级降低到分钟级。",
    },
    {
      position: "Java高级开发工程师",
      company: "某互联网金融公司",
      period: "2016 - 2018",
      description:
        "负责公司支付系统和风控系统的开发维护，使用Spring Boot、Spring Cloud微服务技术栈，设计实现高并发交易系统，优化数据库访问性能，开发分布式事务解决方案。系统日均处理交易50万笔，峰值TPS达到3000。",
    },
    {
      position: "Java开发工程师",
      company: "某软件开发公司",
      period: "2014 - 2016",
      description:
        "参与企业级应用系统开发，负责后台服务和API开发，使用Spring、MyBatis等框架实现业务逻辑和数据访问层，编写单元测试和集成测试，参与code review和性能优化工作。",
    },
  ];

  return (
    <Box py={20} bg="gray.50" id="experience">
      <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="gray.700"
          >
            工作经验
          </Heading>
          <Text
            fontSize="xl"
            textAlign="center"
            mb={10}
            color="gray.600"
            maxW="3xl"
            mx="auto"
          >
            多年Java后台开发与大数据工程实践经验
          </Text>

          <Box
            position="relative"
            maxWidth="800px"
            mx="auto"
            px={{ base: 4, md: 0 }}
          >
            <Box
              position="absolute"
              left="19px"
              top="40px"
              bottom="20px"
              width="2px"
              bg="gray.200"
              zIndex={1}
            ></Box>
            <Stack gap={0} position="relative" zIndex={2}>
              {experiences.map((exp, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.3, delay: index * 0.1 }}
                >
                  <ExperienceItem {...exp} />
                </motion.div>
              ))}
            </Stack>
          </Box>
        </motion.div>
      </Container>
    </Box>
  );
};

export default Experience; 