import React from 'react';
import { FaFlask } from 'react-icons/fa';
import Section from '../components/Section';
import ProjectCard from '../components/ProjectCard';
import projects from '../data/projects.js';  // Added .js extension

const Projects = () => {
  return (
    <div className="space-y-8">
      <div className="bg-white rounded-lg shadow p-6">
        <h1 className="text-3xl font-bold mb-4">Research Projects</h1>
        <p className="text-gray-700">
          An overview of my research projects in computational materials science, 
          machine learning, and AI for scientific applications.
        </p>
      </div>

      <Section 
        title="Featured Projects" 
        icon={<FaFlask className="text-primary" />}
      >
        <div className="space-y-4">
          {projects.map((project) => (
            <ProjectCard key={project.id} project={project} />
          ))}
        </div>
      </Section>

      <div className="bg-white rounded-lg shadow p-6 border-2 border-dashed border-gray-300 flex flex-col items-center justify-center">
        <h3 className="font-bold text-xl mb-2 text-gray-500">Add New Project</h3>
        <p className="text-gray-500 text-center mb-4">
          Update the projects.js file to add new research projects to your portfolio
        </p>
        <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors">
          Add Project
        </button>
      </div>
    </div>
  );
};

export default Projects;