import React from 'react';
import Image from 'next/image';

const BlogCard = () => (
  <div className="flex flex-col gap-4 group cursor-pointer">
    <div className="relative w-full aspect-[4/3] rounded-xl md:rounded-2xl overflow-hidden mb-2 shadow-sm border border-gray-100">
      <Image
        src="/blogs.png"
        alt="Blog Thumbnail"
        fill
        className="object-cover group-hover:scale-105 transition-transform duration-500"
      />
    </div>
    <div className="text-xs md:text-sm font-bold text-[#1E1B4B]">
      04 Feb <span className="mx-1.5">•</span> Engineering <span className="mx-1.5">•</span> 6min
    </div>
    <h3 className="text-sm md:text-xl font-bold text-[#1E1B4B] leading-snug group-hover:text-[#7F00FF] transition-colors duration-300">
      Building a WordPress powerhouse: Utilizing Kubernetes for reliable, cloud-native scaling
    </h3>
    <p className="text-xs md:text-sm text-gray-600 leading-relaxed font-medium hidden md:block">
      For developers and engineers alike, WordPress is an excellent solution for building a versatile website that end-users can easily operate, maintain, and manage. At ZtHosting, w...
    </p>
  </div>
);

const BlogsSection: React.FC = () => {
  return (
    <section className="bg-[#F8F9FF] py-10 md:py-28 font-sans tracking-tight px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1280px]">
        <h2 className="section-heading text-center mb-6 md:mb-16">
          Blogs: Top Stories
        </h2>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-8 lg:gap-10">
          <BlogCard />
          <BlogCard />
          <BlogCard />
        </div>
      </div>
    </section>
  );
};

export default BlogsSection;