import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';

export type FeaturesProps = {
  heading?: string;
  description?: string;
  imageUrl?: string;
  imageAlt?: string;
  imagePosition?: 'left' | 'right';
  items?: Array<{ title: string; description: string; ctaLabel?: string; ctaUrl?: string }>;
};

export default function Features({ heading = '', description = '', imageUrl = '', imageAlt = '', imagePosition = 'left', items = [] }: FeaturesProps) {
  const media = imageUrl ? <img src={imageUrl} alt={imageAlt} className="h-full min-h-96 w-full rounded-xl object-cover" /> : <div className="flex min-h-96 items-center justify-center rounded-xl bg-muted text-sm text-muted-foreground">Add a feature image</div>;
  const details = (
    <Accordion type="single" collapsible defaultValue="feature-0" className="border-t">
      {items.map((item, index) => (
        <AccordionItem key={index} value={`feature-${index}`}>
          <AccordionTrigger className="py-7 text-2xl sm:text-3xl">{item.title}</AccordionTrigger>
          <AccordionContent className="max-w-xl pb-7 text-base leading-7 text-muted-foreground">
            <p>{item.description}</p>
            {item.ctaLabel && <Link href={item.ctaUrl || '#'} className="mt-5 inline-flex items-center gap-2 text-sm font-medium text-brand hover:underline">{item.ctaLabel}<ArrowRight className="size-4" aria-hidden="true" /></Link>}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );

  return (
    <section id="features" className="scroll-mt-20 bg-background py-20 sm:py-28 lg:py-32">
      <div className="section-shell">
        <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="mt-14 grid items-stretch gap-10 lg:grid-cols-2 lg:gap-16">
          {imagePosition === 'left' ? <>{media}{details}</> : <>{details}{media}</>}
        </div>
      </div>
    </section>
  );
}