'use client'

import blog01 from '@/assets/images/blog/blog-01.webp'
import blog03 from '@/assets/images/blog/blog-03.webp'
import blog04 from '@/assets/images/blog/blog-04.webp'
import Image, { StaticImageData } from 'next/image'
import Link from 'next/link'

type RecentBlogType = {
  id: number
  title: string
  image: StaticImageData
  category: string
  date: string
  link: string
}

const recentBlogsData: RecentBlogType[] = [
  {
    id: 1,
    title: 'How eco-supply helped retail giant cut 60% of emissions',
    image: blog01,
    category: 'Technology',
    date: 'June 18, 2025',
    link: '/blog-details',
  },
  {
    id: 2,
    title: 'How green logistics are changing the game',
    image: blog03,
    category: 'Green Technology',
    date: 'June 18, 2025',
    link: '/blog-details',
  },
  {
    id: 3,
    title: 'Circular supply chains: Rethinking resource use',
    image: blog04,
    category: 'Circular Economy',
    date: 'June 18, 2025',
    link: '/blog-details',
  },
]

const RecentBlogs = () => {
  return (
    <section className="py-20 md:py-25 lg:py-32.5">
      <div className="container">
        <div className="mx-auto lg:w-346">
          <div className="mb-6 lg:mb-17.5">
            <h2 className="text-3xl font-medium md:text-4xl">Recent blogs</h2>
          </div>

          <div className="grid grid-cols-1 gap-7.5 md:grid-cols-2 md:gap-10 lg:grid-cols-3">
            {recentBlogsData.map((item) => (
              <Link key={item.id} href={item.link} className="group block w-full text-start">
                <div className="relative mb-4 aspect-5/5 overflow-hidden rounded-2xl lg:aspect-4/5">
                  <Image src={item.image} alt={item.title} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
                  <div className="from-dark/40 pointer-events-none absolute inset-0 bg-gradient-to-b"></div>
                  <div className="absolute inset-s-5 inset-e-5 top-5 z-10 flex items-center gap-2">
                    <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-xl">{item.title}</h3>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

export default RecentBlogs