'use client';

import { Pencil } 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: '/',
    image: 'https://alignui.com/images/blocks/blog-6-image-1.jpg',
    title: '3 ways to simplify reporting',
    date: 'May 12, 2025',
    imageClass:
      'h-[288px] w-[288px] rounded-[28px] xl:h-[440px] xl:w-[600px] xl:rounded-[36px]',
    cardClass: 'w-[288px] xl:w-[600px]',
  },
  {
    id: '2',
    href: '/',
    image: 'https://alignui.com/images/blocks/blog-6-image-2.jpg',
    title: 'Tracking what truly matters',
    date: 'Feb 23, 2025',
    imageClass:
      'h-[288px] w-[288px] rounded-[28px] xl:h-[288px] xl:w-[288px] xl:rounded-[28px]',
    cardClass: 'w-[288px] xl:w-[288px]',
  },
  {
    id: '3',
    href: '/',
    image: 'https://alignui.com/images/blocks/blog-6-image-3.jpg',
    title: 'Key fraud indicators all banks',
    date: 'Oct 16, 2025',
    imageClass:
      'h-[288px] w-[288px] rounded-[28px] xl:h-[180px] xl:w-[288px] xl:rounded-[24px]',
    cardClass: 'w-[288px] xl:w-[288px]',
  },
];

export default function AgileInsightsBlogSection() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 md:px-7'>
        <div className='flex flex-col gap-8 lg:gap-14'>
          <div className='mx-auto flex w-full flex-col gap-4 lg:max-w-[734px] lg:items-center'>
            <div className='flex flex-col gap-2 lg:items-center lg:gap-3'>
              <Badge.Root
                variant='filled'
                className='bg-bg-weak-50 text-label-sm text-text-sub-600 h-7 w-fit gap-1.5 rounded-[9px] pr-2.5 pl-2 normal-case'
              >
                <Badge.Icon
                  as={Pencil}
                  className='text-primary-base mx-0 size-4 before:size-4'
                />
                Blog & Insights
              </Badge.Root>
              <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 font-[550] lg:text-center'>
                Smarter insights for agile teams
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600 lg:text-center'>
              Explore how agile teams streamline onboarding, improve workflows,{' '}
              <br className='hidden lg:block' />
              <span className='text-label-md text-text-sub-600'>
                and ship faster with the right tools.
              </span>
            </p>
          </div>

          <div className='-mx-6 md:-mx-7 xl:mx-0'>
            <div
              className='flex items-start gap-5 overflow-x-auto px-6 md:px-7 lg:justify-center xl:gap-6 xl:overflow-visible xl:px-0'
              style={{ scrollbarWidth: 'none' }}
            >
              {blogPosts.map((post) => (
                <Link
                  key={post.id}
                  href={post.href}
                  className={`flex shrink-0 flex-col gap-4 ${post.cardClass}`}
                >
                  <div
                    className={`relative shrink-0 overflow-hidden ${post.imageClass}`}
                  >
                    <Image
                      src={post.image}
                      alt={post.title}
                      fill
                      className='object-cover'
                    />
                  </div>
                  <div className='flex flex-col gap-1'>
                    <h3 className='text-label-md text-text-strong-950'>
                      {post.title}
                    </h3>
                    <p className='text-paragraph-sm text-text-soft-400 truncate'>
                      {post.date}
                    </p>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}