import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

export type CtaProps = { heading?: string; description?: string; primaryLabel?: string; primaryUrl?: string; secondaryLabel?: string; secondaryUrl?: string };

export default function Cta({ heading = '', description = '', primaryLabel = '', primaryUrl = '#', secondaryLabel = '', secondaryUrl = '#' }: CtaProps) {
  return (
    <section className="bg-background text-foreground">
      <div className="section-shell grid gap-10 py-16 sm:py-20 lg:min-h-64 lg:grid-cols-2 lg:items-center lg:gap-20 lg:py-0">
        <div className="flex flex-col justify-center">
          <h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
        </div>
        <div className="flex flex-col justify-center">
          {description && <p className="max-w-xl text-base leading-7 text-muted-foreground">{description}</p>}
          <div className="mt-7 flex flex-wrap gap-3">
            {primaryLabel && <Button asChild size="lg"><Link href={primaryUrl}>{primaryLabel}<ArrowRight aria-hidden="true" /></Link></Button>}
            {secondaryLabel && <Button asChild variant="outline" size="lg"><Link href={secondaryUrl}>{secondaryLabel}</Link></Button>}
          </div>
        </div>
      </div>
    </section>
  );
}