import Link from 'next/link';
import { ArrowRight, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';

export type PostsCarouselProps = {
  heading?: string;
  description?: string;
  posts?: Array<{ title: string; category?: string; date?: string; imageUrl?: string; imageAlt?: string; url: string; typeLabel?: string }>;
  viewAllLabel?: string;
  viewAllUrl?: string;
};

export default function PostsCarousel({ heading = '', description = '', posts = [], viewAllLabel = '', viewAllUrl = '#' }: PostsCarouselProps) {
  return (
    <section id="resources" className="scroll-mt-20 bg-background py-20 sm:py-28">
      <div className="section-shell">
        <Carousel opts={{ align: 'start' }}>
          <div className="flex items-end justify-between gap-8">
            <div className="max-w-4xl">
              <h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
              {description && <p className="mt-4 max-w-2xl leading-7 text-muted-foreground">{description}</p>}
            </div>
            <div className="hidden shrink-0 gap-2 sm:flex"><CarouselPrevious className="static translate-y-0" /><CarouselNext className="static translate-y-0" /></div>
          </div>
          <CarouselContent className="mt-12">
            {posts.map((post, index) => (
              <CarouselItem key={index} className="sm:basis-1/2 lg:basis-1/3">
                <article className="h-full">
                  <Link href={post.url} className="group block">
                    <div className="relative aspect-[4/3] overflow-hidden rounded-xl bg-secondary">
                      {post.imageUrl ? <img src={post.imageUrl} alt={post.imageAlt || ''} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]" /> : <div className="flex h-full items-center justify-center text-sm text-muted-foreground">Add an image</div>}
                      {post.typeLabel && <span className="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full bg-background px-3 py-2 text-xs font-medium"><FileText className="size-3.5" aria-hidden="true" />{post.typeLabel}</span>}
                    </div>
                    <div className="pt-5">
                      <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">{post.category && <span>{post.category}</span>}{post.date && <span>{post.date}</span>}</div>
                      <h3 className="mt-3 text-2xl font-normal leading-tight tracking-[-0.025em] group-hover:underline">{post.title}</h3>
                    </div>
                  </Link>
                </article>
              </CarouselItem>
            ))}
          </CarouselContent>
          <div className="mt-8 flex gap-2 sm:hidden"><CarouselPrevious className="static translate-y-0" /><CarouselNext className="static translate-y-0" /></div>
        </Carousel>
        {viewAllLabel && <Button asChild variant="outline" size="lg" className="mt-12"><Link href={viewAllUrl}>{viewAllLabel}<ArrowRight aria-hidden="true" /></Link></Button>}
      </div>
    </section>
  );
}