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

interface CtaBannerProps {
  heading: string;
  description: string;
  buttonText: string;
  buttonHref: string;
}

export function CtaBanner({
  heading,
  description,
  buttonText,
  buttonHref,
}: CtaBannerProps) {
  return (
    <section className="bg-primary py-20">
      <div className="mx-auto max-w-7xl px-6 text-center">
        <h2 className="mx-auto max-w-2xl text-balance text-3xl font-bold tracking-tight text-primary-foreground md:text-4xl font-serif">
          {heading}
        </h2>
        <p className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-primary-foreground/80">
          {description}
        </p>
        <Button
          size="lg"
          variant="secondary"
          asChild
          className="mt-10"
        >
          <Link href={buttonHref}>
            {buttonText}
            <ArrowRight className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </div>
    </section>
  );
}