import { Button } from "@/components/ui/button"
import Link from "next/link"

interface CTASectionProps {
  title: string
  description: string
  primaryActionLabel: string
  primaryActionHref: string
  secondaryActionLabel?: string
  secondaryActionHref?: string
  align?: "center" | "left"
  background?: "default" | "muted" | "primary"
}

export function CTASection({
  title,
  description,
  primaryActionLabel,
  primaryActionHref,
  secondaryActionLabel,
  secondaryActionHref,
  align = "center",
  background = "default",
}: CTASectionProps) {
  const bgClasses = {
    default: "bg-background",
    muted: "bg-muted",
    primary: "bg-primary text-primary-foreground",
  }

  const textClasses = background === "primary" ? "text-primary-foreground" : ""
  const mutedTextClasses = background === "primary" ? "text-primary-foreground/80" : "text-gray-500 dark:text-gray-400"

  return (
    <section className={`w-full py-12 md:py-24 ${bgClasses[background]}`}>
      <div className="container px-4 md:px-6">
        <div
          className={`flex flex-col gap-4 ${align === "center" ? "items-center text-center" : "items-start text-left"}`}
        >
          <h2 className={`text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl ${textClasses}`}>{title}</h2>
          <p className={`max-w-[700px] ${mutedTextClasses} md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed`}>
            {description}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 mt-4">
            <Link href={primaryActionHref}>
              <Button size="lg" variant={background === "primary" ? "secondary" : "default"}>
                {primaryActionLabel}
              </Button>
            </Link>
            {secondaryActionLabel && secondaryActionHref && (
              <Link href={secondaryActionHref}>
                <Button
                  size="lg"
                  variant={background === "primary" ? "outline" : "outline"}
                  className={background === "primary" ? "border-primary-foreground" : ""}
                >
                  {secondaryActionLabel}
                </Button>
              </Link>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}