import Image, { StaticImageData } from 'next/image'
import Link from 'next/link'

import blog01 from '@/assets/images/blog/blog-01.webp'
import blog02 from '@/assets/images/blog/blog-02.webp'
import blog03 from '@/assets/images/blog/blog-03.webp'
import blog04 from '@/assets/images/blog/blog-04.webp'
import blog05 from '@/assets/images/blog/blog-05.webp'
import blog06 from '@/assets/images/blog/blog-06.webp'

type BlogItemType = {
  id: number
  title: string
  image: StaticImageData
  alt: string
  category: string
  date: string
  link: string
  imgClass: string
  overlayClass: string
}

const blogItemsData: BlogItemType[] = [
  {
    id: 1,
    title: 'How eco-supply helped retail giant cut 60% of emissions',
    image: blog01,
    alt: 'How eco-supply helped retail giant cut 60% of emissions',
    category: 'Technology',
    date: 'June 18, 2025',
    link: '/blog-details',
    imgClass: 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-600',
    overlayClass: 'absolute inset-0 bg-gradient-to-b from-dark/70 pointer-events-none',
  },
  {
    id: 2,
    title: 'The future of sustainable logistics: 5 trends to watch in 2025',
    image: blog02,
    alt: 'The future of sustainable logistics: 5 trends to watch in 2025',
    category: 'Packaging',
    date: 'June 18, 2025',
    link: '/blog-details',
    imgClass: 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500',
    overlayClass: 'absolute inset-0 bg-gradient-to-b from-dark/70 pointer-events-none',
  },
  {
    id: 3,
    title: 'How green logistics are changing the game',
    image: blog03,
    alt: 'How green logistics are changing the game',
    category: 'Green Technology',
    date: 'June 18, 2025',
    link: '/blog-details',
    imgClass: 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500',
    overlayClass: 'absolute inset-0 bg-gradient-to-b from-dark/70 pointer-events-none',
  },
  {
    id: 4,
    title: 'Circular supply chains: Rethinking resource use',
    image: blog04,
    alt: 'How green logistics are changing the game',
    category: 'Circular Economy',
    date: 'June 18, 2025',
    link: '/blog-details',
    imgClass: 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500',
    overlayClass: 'absolute inset-0 bg-gradient-to-b from-dark/70 pointer-events-none',
  },
  {
    id: 5,
    title: 'Eco-friendly schools: Teaching sustainability by doing',
    image: blog05,
    alt: 'Eco-friendly schools: Teaching sustainability by doing',
    category: 'Education',
    date: 'June 18, 2025',
    link: '/blog-details',
    imgClass: 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500',
    overlayClass: 'absolute inset-0 bg-gradient-to-b from-dark/40 pointer-events-none',
  },
  {
    id: 6,
    title: 'Greener deliveries: The future of E-commerce',
    image: blog06,
    alt: 'Eco-friendly schools: Teaching sustainability by doing',
    category: 'Green Logistics',
    date: 'June 18, 2025',
    link: '/blog-details',
    imgClass: 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500',
    overlayClass: 'absolute inset-0 bg-gradient-to-b from-dark/40 pointer-events-none',
  },
]

const BlogGrid = () => {
  return (
    <section className="py-15 md:py-25">
      <div className="container">
        <div className="grid grid-cols-1 gap-7.5 md:grid-cols-2 lg:grid-cols-3 lg:gap-10">
          {blogItemsData.map((item) => (
            <div key={item.id} className="h-auto!">
              <Link href={item.link} className="group block w-full text-start">
                <div className="relative mb-2.5 aspect-5/5 overflow-hidden rounded-2xl md:mb-4 lg:aspect-4/5">
                  <Image src={item.image} alt={item.alt} className={item.imgClass} />
                  <div className={item.overlayClass}></div>
                  <div className="absolute inset-s-4 inset-e-4 top-4 z-10 flex items-center gap-2 md:inset-s-5 md:top-5 md:right-5">
                    <span className="bg-primary-1 text-default-950 inline-flex rounded-full px-2.5 py-1.25 text-sm font-normal">{item.category}</span>
                    <span className="inline-flex rounded-full border border-white px-2.5 py-1.25 text-sm font-normal text-white">{item.date}</span>
                  </div>
                </div>
                <h3 className="text-default-950 text-lg leading-snug font-medium transition-colors duration-300 md:text-[22px]">{item.title}</h3>
              </Link>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default BlogGrid