"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 "./LandingButtonWrapper.module.scss";

export default function LandingButtonWrapper() {
  const router = useRouter();
  const t = useTranslations(translatePathEmailMarketingSoulmateV1("Landing"));

  const handleContinue = () => {
    router.push(ROUTES.emailMarketingSoulmateV1SpecialOffer());
  };

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