'use client';

import { ArrowUpRight } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import * as Badge from '@/components/ui/badge';

const blogPosts = [
  {
    id: '1',
    href: '/blog/key-fraud-indicators-for-banks',
    image: 'https://alignui.com/images/blocks/blog-7-image-1.jpg',
    title: 'Key fraud indicators for all banks',
    date: 'May 12, 2025',
    dateTime: '2025-05-12',
    cardClass: 'w-[288px]',
    imageClass: 'h-[288px]',
    textClass: 'w-full',
    sizes: '288px',
  },
  {
    id: '2',
    href: '/blog/improve-project-visibility',
    image: 'https://alignui.com/images/blocks/blog-7-image-2.jpg',
    title: 'Improve project visibility with shared dashboards',
    date: 'May 24, 2025',
    dateTime: '2025-05-24',
    cardClass: 'w-[288px] xl:w-[600px]',
    imageClass: 'h-[288px] xl:h-[440px]',
    textClass: 'w-full xl:w-[400px]',
    sizes: '(min-width: 1280px) 600px, 288px',
  },
  {
    id: '3',
    href: '/blog/tracking-what-truly-matters',
    image: 'https://alignui.com/images/blocks/blog-7-image-3.jpg',
    title: 'Tracking what truly matters',
    date: 'May 27, 2025',
    dateTime: '2025-05-27',
    cardClass: 'w-[288px]',
    imageClass: 'h-[288px]',
    textClass: 'w-full',
    sizes: '288px',
  },
];

export default function GrowthGuidesBlogShowcase() {
  return (
    <section className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 lg:px-7'>
        <div className='flex flex-col items-center gap-8 lg:gap-14'>
          <div className='flex w-full flex-col gap-4 lg:max-w-[808px] lg:flex-row lg:flex-wrap lg:items-end lg:gap-6'>
            <div className='flex w-full flex-col gap-2 lg:w-[496px] lg:gap-3'>
              <Badge.Root
                variant='lighter'
                className='bg-bg-weak-50 text-label-sm text-text-sub-600 h-7 w-fit rounded-[9px] px-2.5 normal-case'
              >
                Latest from the blog
              </Badge.Root>
              <h2 className='text-title-h4 text-text-strong-950 lg:text-title-h3 font-[550]'>
                Blog posts that guide <br className='hidden lg:block' /> your
                growth
              </h2>
            </div>
            <div className='flex w-full flex-col gap-4 lg:w-[288px] lg:gap-6'>
              <p className='text-label-md text-text-sub-600'>
                Explore expert tips, market trends, and practical guides.
              </p>
              <Link
                href='/blog'
                className='text-label-md text-text-strong-950 group flex w-fit items-center gap-1'
              >
                See all blogs
                <ArrowUpRight
                  className='size-5 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5'
                  aria-hidden='true'
                />
              </Link>
            </div>
          </div>

          <div className='-mx-6 w-[calc(100%+48px)] lg:-mx-7 lg:w-[calc(100%+56px)] xl:mx-0 xl:w-full'>
            <div
              className='flex items-start gap-5 overflow-x-auto px-6 lg:justify-center lg:px-7 xl:gap-6 xl:overflow-visible xl:px-0'
              style={{ scrollbarWidth: 'none' }}
            >
              {blogPosts.map((post) => (
                <Link
                  key={post.id}
                  href={post.href}
                  className={`group flex shrink-0 flex-col gap-4 ${post.cardClass}`}
                >
                  <div
                    className={`relative w-full shrink-0 overflow-hidden rounded-[28px] ${post.imageClass}`}
                  >
                    <Image
                      src={post.image}
                      alt={post.title}
                      fill
                      sizes={post.sizes}
                      className='object-cover transition-transform duration-500 ease-out group-hover:scale-[1.03]'
                    />
                  </div>
                  <div className={`flex flex-col gap-1 ${post.textClass}`}>
                    <h3 className='text-label-md text-text-strong-950'>
                      {post.title}
                    </h3>
                    <time
                      dateTime={post.dateTime}
                      className='text-paragraph-sm text-text-soft-400 truncate'
                    >
                      {post.date}
                    </time>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}