"use client";

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

import { Button, Typography } from "@/components/ui";
import { BlurComponent } from "@/components/widgets";
import { ROUTES } from "@/shared/constants/client-routes";
import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";

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

interface SpecialOfferButtonWrapperProps {
  productId: string;
  placementId: string;
  paywallId: string;
}

export default function SpecialOfferButtonWrapper({
  productId,
  placementId,
  paywallId,
}: SpecialOfferButtonWrapperProps) {
  const router = useRouter();
  const t = useTranslations(
    translatePathEmailMarketingSoulmateV1("SpecialOffer")
  );

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

  return (
    <div className={styles.buttonContainer}>
      <BlurComponent
        isActiveBlur={true}
        gradientClassName={styles.gradientBlur}
      >
        <Button className={styles.button} onClick={openPaymentModal}>
          <Typography color="white" className={styles.text}>
            {t("button-continue")}
          </Typography>
        </Button>
      </BlurComponent>
    </div>
  );
}
