import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.css";
import Title from "@/components/Title";
import MainButton from "@/components/MainButton";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useEffect } from "react";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";

function SuccessPaymentPage(): JSX.Element {
  const { translate } = useTranslations();
  const navigate = useNavigate();
  const isAdvisorChat = window.location.href.includes("/advisor-chat/");
  const titleText = isAdvisorChat
    ? "The payment was successful"
    : "The information has been sent to your email";

  useEffect(() => {
    metricService.reachGoal(EGoals.PAYMENT_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
  }, []);

  return (
    <section className={`${styles.page} page`}>
      <img
        src="/SuccessIcon.webp"
        alt="Success Icon"
        style={{ minHeight: "98px" }}
      />
      <div className={styles.text}>
        <Title variant="h1">{titleText}</Title>
        <p>{translate("auweb.pay_good.text1")}</p>
      </div>
      {isAdvisorChat && (
        <MainButton
          className={styles.button}
          onClick={() =>
            navigate(
              routes.client.advisorChatPrivate("asst_WWkAlT4Ovs6gKRy6VEn9LqNS")
            )
          }
        >
          {translate("auweb.pay_good.button")}
        </MainButton>
      )}
    </section>
  );
}

export default SuccessPaymentPage;
