import React from 'react';
import { Calendar, User } from 'lucide-react';

function BlogGrid() {
  const blogPosts = [
    {
      title: 'Getting Started with Modern React',
      excerpt: 'Learn the fundamentals of React 18 and build amazing user interfaces.',
      author: 'John Doe',
      date: '2024-01-15',
      image: '/images/courses.aee168f4-1768917228064.png',
      category: 'React'
    },
    {
      title: 'Building Scalable Web Applications',
      excerpt: 'Best practices for creating maintainable and scalable web applications.',
      author: 'Jane Smith',
      date: '2024-01-10',
      image: '/images/courses-box-1.e8498908-1768917228039.png',
      category: 'Architecture'
    },
    {
      title: 'The Future of Web Development',
      excerpt: 'Explore emerging trends and technologies shaping the future of web development.',
      author: 'Mike Johnson',
      date: '2024-01-05',
      image: '/images/courses-box-2.2e36a41b-1768917228024.png',
      category: 'Trends'
    }
  ];

  return (
    <section className="py-16 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Latest from our blog
          </h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Stay updated with the latest trends and best practices in web development
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {blogPosts.map((post, index) => (
            <article key={index} className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden border">
              <img src={post.image} alt={post.title} className="w-full h-48 object-cover" />
              
              <div className="p-6">
                <div className="text-sm text-blue-600 font-semibold mb-2">
                  {post.category}
                </div>
                
                <h3 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 cursor-pointer">
                  {post.title}
                </h3>
                
                <p className="text-gray-600 mb-4">
                  {post.excerpt}
                </p>
                
                <div className="flex items-center text-sm text-gray-500">
                  <User className="w-4 h-4 mr-1" />
                  <span className="mr-4">{post.author}</span>
                  <Calendar className="w-4 h-4 mr-1" />
                  <span>{post.date}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

export default BlogGrid;