import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import routes from "@/routes";
import styles from "./styles.module.css";
import Title from "@/components/Title";
import MainButton from "@/components/MainButton";
import { useDispatch } from "react-redux";
import { actions } from "@/store";

function PaymentSuccessPage(): JSX.Element {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const handleNext = () => {
    dispatch(actions.status.update("subscribed"));
    navigate(routes.client.home());
  };

  return (
    <section className={`${styles.page} page`}>
      <img src="/SuccessIcon.png" alt="Success Icon" />
      <div className={styles.text}>
        <Title variant="h1">{t("auweb.pay_good.title")}</Title>
        <p>{t("auweb.pay_good.text1")}</p>
      </div>
      <MainButton className={styles.button} onClick={handleNext}>
        {t("auweb.pay_good.button")}
      </MainButton>
    </section>
  );
}

export default PaymentSuccessPage;