import React from 'react';
import BlogCard from '../components/BlogCard';
import blogs from '../data/blogs.js';  // Added .js extension

const Blog = () => {
  return (
    <div className="space-y-8">
      <div className="bg-white rounded-lg shadow p-6">
        <h1 className="text-3xl font-bold mb-4">Blog</h1>
        <p className="text-gray-700">
          Thoughts, insights, and updates on my research in machine learning, 
          materials science, and AI for scientific applications.
        </p>
      </div>

      <div className="space-y-8">
        {blogs.map((blog) => (
          <BlogCard key={blog.id} blog={blog} />
        ))}
      </div>

      <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 Blog Post</h3>
        <p className="text-gray-500 text-center mb-4">
          Use markdown to easily add new blog posts by updating the blogs.js file
        </p>
        <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-secondary transition-colors">
          Add Post
        </button>
      </div>
    </div>
  );
};

export default Blog;