import React from 'react';
import { FaDownload, FaGraduationCap, FaBriefcase, FaFlask, FaCode, FaAward } from 'react-icons/fa';
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 projects from '../data/projects.js';  // Added .js extension
import skills from '../data/skills.js';  // Added .js extension
import { publications } from '../data/publications.js';  // Added .js extension

const Resume = () => {
  return (
    <div className="space-y-8">
      <div className="bg-white rounded-lg shadow p-6 flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold mb-2">Resume</h1>
          <p className="text-gray-700">
            A comprehensive overview of my academic and professional experience
          </p>
        </div>
        <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors flex items-center">
          <FaDownload className="mr-2" />
          Download PDF
        </button>
      </div>

      {/* Professional Summary */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4">Professional Summary</h2>
        <p className="text-gray-700 leading-relaxed">{about.bio}</p>
      </div>

      {/* Education */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaGraduationCap className="mr-2 text-primary" />
          Education
        </h2>
        <div className="space-y-6">
          {education.map((edu, index) => (
            <div key={edu.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
              <div className="flex justify-between flex-wrap">
                <h3 className="font-bold text-lg">{edu.degree}</h3>
                <span className="text-gray-600">{edu.period}</span>
              </div>
              <p className="text-primary">{edu.institution}</p>
              {edu.gpa && <p className="text-gray-600">GPA: {edu.gpa}</p>}
              {edu.description.length > 0 && (
                <ul className="mt-2 list-disc list-inside text-gray-700">
                  {edu.description.map((item, idx) => (
                    <li key={idx}>{item}</li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Experience */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaBriefcase className="mr-2 text-primary" />
          Professional Experience
        </h2>
        <div className="space-y-6">
          {experience.map((exp, index) => (
            <div key={exp.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
              <div className="flex justify-between flex-wrap">
                <h3 className="font-bold text-lg">{exp.position}</h3>
                <span className="text-gray-600">{exp.period}</span>
              </div>
              <p className="text-primary">{exp.company}</p>
              <ul className="mt-2 list-disc list-inside text-gray-700">
                {exp.description.map((item, idx) => (
                  <li key={idx}>{item}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* Research Projects */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaFlask className="mr-2 text-primary" />
          Research Projects
        </h2>
        <div className="space-y-6">
          {projects.map((project, index) => (
            <div key={project.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
              <div className="flex justify-between flex-wrap">
                <h3 className="font-bold text-lg">{project.title}</h3>
                <span className="text-gray-600">{project.period}</span>
              </div>
              <p className="text-primary">{project.organization}</p>
              <ul className="mt-2 list-disc list-inside text-gray-700">
                {project.description.map((item, idx) => (
                  <li key={idx}>{item}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* Publications */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaAward className="mr-2 text-primary" />
          Selected Publications
        </h2>
        <div className="space-y-4">
          {publications.slice(0, 3).map((pub, index) => (
            <div key={pub.id} className={index !== 0 ? "pt-4 border-t border-gray-200" : ""}>
              <h3 className="font-bold text-lg">{pub.title}</h3>
              <p className="text-gray-700 italic">{pub.authors}</p>
              <div className="flex justify-between items-center mt-1">
                <p className="text-primary">{pub.venue}</p>
                <span className="text-gray-600">{pub.year}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Skills */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold mb-4 flex items-center">
          <FaCode className="mr-2 text-primary" />
          Technical Skills
        </h2>
        <div className="space-y-4">
          {Object.entries(skills).map(([category, skillList]) => (
            <div key={category}>
              <h3 className="font-bold text-lg mb-2">{category}</h3>
              <div className="flex flex-wrap gap-2 mb-4">
                {skillList.map((skill, idx) => (
                  <span 
                    key={idx} 
                    className="px-3 py-1 bg-light text-primary rounded-full text-sm"
                  >
                    {skill}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Resume;