import React from 'react';
import { FaGraduationCap, FaBriefcase, FaStar, FaCode } from 'react-icons/fa';
import Section from '../components/Section';
import EducationCard from '../components/EducationCard';
import ExperienceCard from '../components/ExperienceCard';
import SkillTag from '../components/SkillTag';
import about from '../data/about.js';  // Added .js extension
import education from '../data/education.js';  // Added .js extension
import experience from '../data/experience.js';  // Added .js extension
import skills from '../data/skills.js';  // Added .js extension

const Home = () => {
  return (
    <div className="space-y-8">
      {/* Bio Section */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4">About Me</h2>
        <p className="text-gray-700 leading-relaxed">{about.bio}</p>
      </div>

      {/* Research Interests */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4">Research Interests</h2>
        <ul className="list-disc list-inside text-gray-700 space-y-2">
          {about.researchInterests.map((interest, index) => (
            <li key={index}>{interest}</li>
          ))}
        </ul>
      </div>

      {/* Awards */}
      <Section 
        title="Honors & Awards" 
        icon={<FaStar className="text-primary" />}
      >
        <div className="space-y-4">
          {about.awards.map((award, index) => (
            <div key={index} className="bg-white rounded-lg shadow p-6">
              <h3 className="font-bold text-lg">{award.title}</h3>
              <p className="text-primary">{award.organization}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* Education Section */}
      <Section 
        title="Education" 
        icon={<FaGraduationCap className="text-primary" />}
      >
        <div className="space-y-4">
          {education.map((edu) => (
            <EducationCard key={edu.id} education={edu} />
          ))}
        </div>
      </Section>

      {/* Experience Section */}
      <Section 
        title="Experience" 
        icon={<FaBriefcase className="text-primary" />}
      >
        <div className="space-y-4">
          {experience.map((exp) => (
            <ExperienceCard key={exp.id} experience={exp} />
          ))}
        </div>
      </Section>

      {/* Skills Section */}
      <Section 
        title="Skills" 
        icon={<FaCode className="text-primary" />}
      >
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {Object.entries(skills).map(([category, skillList]) => (
            <div key={category} className="bg-white rounded-lg shadow p-6">
              <h3 className="font-bold text-lg mb-2">{category}</h3>
              <div className="flex flex-wrap gap-2">
                {skillList.map((skill, idx) => (
                  <SkillTag key={idx} skill={skill} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
};

export default Home;