import { IconCalendar, IconMail } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import { SecondaryButton } from "@/components/ui/secondary-button";

interface SecondaryCTAProps {
  calLabel?: string;
  description?: string;
  gradientDirection?: string;
  heading?: string;
}

export async function SecondaryCTA({
  heading,
  description,
  calLabel,
  gradientDirection = "bg-gradient-to-tr",
}: SecondaryCTAProps) {
  const t = await getTranslations("secondaryCta");
  const displayHeading = heading ?? t("heading");
  const displayDescription = description ?? t("description");
  const displayCalLabel = calLabel ?? t("calLabel");

  return (
    <section
      className={`${gradientDirection} from-[#000] to-[#1A2428] py-12 sm:py-24 md:py-32`}
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl text-center">
          <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-4xl">
            {displayHeading}
          </h2>
          <p className="mx-auto mb-8 max-w-2xl text-base text-neutral-300 md:mb-10 md:text-lg">
            {displayDescription}
          </p>

          <div className="flex flex-col items-stretch justify-center gap-4 sm:flex-row sm:items-center">
            <ContactButton className="hover:scale-[1.02]">
              <span>{displayCalLabel}</span>
              <IconCalendar className="h-5 w-5" />
            </ContactButton>
            <SecondaryButton href="/contact" icon={IconMail}>
              {t("contactLabel")}
            </SecondaryButton>
          </div>
        </div>
      </div>
    </section>
  );
}