import { useTranslation } from "react-i18next";
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";

function SuccessPaymentPage(): JSX.Element {
  const { t } = useTranslation();
  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(() => {
    window.ym(95799066, "reachGoal", "PaymentSuccess");
  }, []);

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

export default SuccessPaymentPage;