import type { CtaSectionBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

export function CtaSection({ block }: { block: CtaSectionBlock }) {
  const { t } = useLocale();
  const isPrimary = (block.background ?? "primary") === "primary";

  return (
    <section
      className={cn(
        "py-16 md:py-20",
        isPrimary ? "bg-primary text-primary-foreground" : "bg-band-cream text-foreground",
      )}
    >
      <div className="container max-w-3xl text-center">
        <h2
          className={cn(
            "font-display italic text-3xl sm:text-4xl md:text-5xl text-balance",
            isPrimary ? "text-primary-foreground" : "text-primary",
          )}
        >
          {t(block.title)}
        </h2>
        {block.subtitle && (
          <div
            className={cn(
              "mt-4 text-base sm:text-lg leading-relaxed",
              isPrimary ? "text-primary-foreground/85" : "text-foreground/80",
            )}
            dangerouslySetInnerHTML={{ __html: t(block.subtitle) }}
          />
        )}
        <Button
          asChild
          variant={isPrimary ? "secondary" : "default"}
          className="mt-8 rounded-sm"
        >
          <a
            href={block.cta.href}
            target={block.cta.external ? "_blank" : undefined}
            rel={block.cta.external ? "noopener noreferrer" : undefined}
          >
            {t(block.cta.label)}
            <ArrowRight className="ml-2 h-4 w-4" aria-hidden />
          </a>
        </Button>
      </div>
    </section>
  );
}