import React from 'react';
import { Briefcase, Code, Database, Palette, Smartphone, Zap } from 'lucide-react';

const Skills: React.FC = () => {
  const experience = [
    {
      title: 'Senior Full-Stack Developer',
      company: 'Tech Innovations Inc.',
      period: '2022 - Present',
      description: 'Leading development of scalable web applications using React, Node.js, and cloud technologies.'
    },
    {
      title: 'Frontend Developer',
      company: 'Digital Solutions Ltd.',
      period: '2020 - 2022',
      description: 'Built responsive user interfaces and improved performance for e-commerce platforms.'
    },
    {
      title: 'Junior Developer',
      company: 'StartupXYZ',
      period: '2019 - 2020',
      description: 'Developed mobile applications and contributed to backend API development.'
    }
  ];

  const specificSkills = [
    { name: 'React', level: 95, icon: Code },
    { name: 'TypeScript', level: 90, icon: Code },
    { name: 'Node.js', level: 85, icon: Database },
    { name: 'Python', level: 80, icon: Code },
    { name: 'UI/UX Design', level: 75, icon: Palette },
    { name: 'Mobile Development', level: 70, icon: Smartphone }
  ];

  return (
    <section className="py-20 bg-background-light">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-text sm:text-4xl">
            Experience & Skills
          </h2>
          <p className="mt-4 text-lg text-lines max-w-2xl mx-auto">
            A comprehensive overview of my professional journey and technical expertise
          </p>
        </div>

        <div className="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Experience Section */}
          <div>
            <div className="flex items-center mb-8">
              <div className="p-3 bg-other rounded-lg mr-4">
                <Briefcase className="h-6 w-6 text-background" />
              </div>
              <h3 className="text-2xl font-bold text-text">Experience</h3>
            </div>
            <div className="space-y-6">
              {experience.map((exp, index) => (
                <div
                  key={index}
                  className="bg-background rounded-lg p-6 border border-lines"
                >
                  <h4 className="text-lg font-semibold text-text mb-1">
                    {exp.title}
                  </h4>
                  <p className="text-other font-medium mb-2">
                    {exp.company} • {exp.period}
                  </p>
                  <p className="text-lines text-sm">
                    {exp.description}
                  </p>
                </div>
              ))}
            </div>
          </div>

          {/* Specific Skills Section */}
          <div>
            <div className="flex items-center mb-8">
              <div className="p-3 bg-boxes rounded-lg mr-4">
                <Zap className="h-6 w-6 text-text" />
              </div>
              <h3 className="text-2xl font-bold text-text">Specific Skills</h3>
            </div>
            <div className="space-y-6">
              {specificSkills.map((skill, index) => {
                const IconComponent = skill.icon;
                return (
                  <div key={skill.name} className="bg-background rounded-lg p-6 shadow-md border border-lines">
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center">
                        <div className="p-2 bg-boxes rounded-lg mr-3">
                          <IconComponent className="h-5 w-5 text-other" />
                        </div>
                        <span className="font-semibold text-text">{skill.name}</span>
                      </div>
                      <span className="text-sm font-medium text-lines">{skill.level}%</span>
                    </div>
                    <div className="w-full bg-background-light rounded-full h-2">
                      <div
                        className="bg-other h-2 rounded-full transition-all duration-1000 ease-out"
                        style={{ width: `${skill.level}%` }}
                      ></div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Skills;