"use client";

import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";

import { Button, Typography } from "@/components/ui";
import { usePeriod } from "@/hooks/translations/usePeriod";
import { ROUTES } from "@/shared/constants/client-routes";
import { getCurrentUtmParams } from "@/shared/utils/url";
import { PeriodType } from "@/types/period";

import styles from "./Button.module.scss";

interface ISaveOffButtonProps {
  trialPeriod: PeriodType;
  trialInterval: number;
}

export default function SaveOffButton({
  trialPeriod,
  trialInterval,
}: ISaveOffButtonProps) {
  const t = useTranslations("SaveOff");
  const { getPeriodText } = usePeriod();
  const router = useRouter();

  const handleNext = () => {
    const utmParams = getCurrentUtmParams();
    router.push(ROUTES.secretDiscount(utmParams));
  };

  return (
    <Button className={styles.button} onClick={handleNext}>
      <Typography color="white" size="xl">
        {t("button-trial", {
          trialPeriod: getPeriodText(trialPeriod, trialInterval),
        })}
      </Typography>
    </Button>
  );
}