import images from '@/assets/images/images';
import Image from 'next/image';

const posts = [
  {
    title: 'Sustainable Practices Reducing Waste in Industrial Production',
    image: images.blogImg_1.src,
    link: '#',
  },
  {
    title: 'Advanced Robotics Revolutionizing Industrial Workflows',
    image: images.blogImg_1.src,
    link: '#',
  },
  {
    title: 'Top Benefits of the Robotics in Manufacturing',
    image: images.blogImg_1.src,
    link: '#',
  },
  {
    title: 'Leveraging Data Analytics for Smarter Production',
    image: images.blogImg_1.src,
    link: '#',
  },
  {
    title: 'Reducing Operational Costs Through Automation',
    image: '/images/post5.jpg',
    link: '#',
  },
  {
    title: 'The Advantages of Customized Manufacturing Solutions',
    image: '/images/post6.jpg',
    link: '#',
  },
];

export default function PostsGrid() {
  return (
    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 py-14 sm:grid-cols-2 md:py-28 lg:grid-cols-3">
      {posts.map((post, index) => (
        <div key={index} className="overflow-hidden bg-white">
          <div className="relative aspect-[1.09] w-full overflow-hidden rounded-4xl">
            <Image
              src={post.image}
              alt={post.title}
              fill
              className="h-auto w-full object-cover"
            />
          </div>

          <div className="py-7">
            <h2 className="mb-5 text-xl font-semibold">{post.title}</h2>
            <a
              href={post.link}
              className="text-primary text-base hover:underline"
            >
              Read More →
            </a>
          </div>
        </div>
      ))}
    </div>
  );
}
