"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 { PeriodType } from "@/types/period";

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

interface ISecretDiscountButtonProps {
  trialPeriod: PeriodType;
  trialInterval: number;
  productId: string;
  placementId: string;
  paywallId: string;
}

export default function SecretDiscountButton({
  trialPeriod,
  trialInterval,
  productId,
  placementId,
  paywallId,
}: ISecretDiscountButtonProps) {
  const t = useTranslations("SecretDiscount");
  const { getPeriodText } = usePeriod();
  const router = useRouter();

  const handleNext = () => {
    router.push(
      ROUTES.payment({
        productId,
        placementId,
        paywallId,
      })
    );
  };

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