import React from 'react';
import { FaBook, FaFileAlt } from 'react-icons/fa';
import Section from '../components/Section';
import PublicationCard from '../components/PublicationCard';
import { publications, patents } from '../data/publications.js';  // Added .js extension

const Publications = () => {
  return (
    <div className="space-y-8">
      <div className="bg-white rounded-lg shadow p-6">
        <h1 className="text-3xl font-bold mb-4">Publications & Patents</h1>
        <p className="text-gray-700">
          A collection of my academic publications and patent applications in the fields of 
          materials science, machine learning, and computational chemistry.
        </p>
      </div>

      <Section 
        title="Publications" 
        icon={<FaBook className="text-primary" />}
      >
        <div className="space-y-4">
          {publications.map((pub) => (
            <PublicationCard key={pub.id} publication={pub} />
          ))}
        </div>
      </Section>

      <Section 
        title="Patents" 
        icon={<FaFileAlt className="text-primary" />}
      >
        <div className="space-y-4">
          {patents.map((patent) => (
            <div key={patent.id} className="bg-white rounded-lg shadow p-6 transition-all hover:shadow-lg">
              <h3 className="font-bold text-lg">{patent.title}</h3>
              <p className="text-gray-700 mt-1">{patent.description}</p>
              <div className="flex justify-between items-center mt-2">
                <p className="text-primary font-medium">{patent.id_number}</p>
                <span className="text-gray-600">{patent.year}</span>
              </div>
            </div>
          ))}
        </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 Publication</h3>
        <p className="text-gray-500 text-center mb-4">
          Update the publications.js file to add new publications to your portfolio
        </p>
        <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors">
          Add Publication
        </button>
      </div>
    </div>
  );
};

export default Publications;