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";

function PaymentFailPage(): JSX.Element {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const handleNext = () => navigate(routes.client.trialPayment());

  return (
    <section className={`${styles.page} page`}>
      <img
        src="/ExclamationIcon.webp"
        alt="Exclamation Icon"
        style={{ minHeight: "180px" }}
      />
      <div className={styles.text}>
        <Title variant="h1">{t("/payment/fail.title")}</Title>
        <p className={styles.list}>{t("/payment/fail.description1")}</p>
      </div>
      <div className={styles.bottom}>
        <p className={styles.description}>{t("/payment/fail.description2")}</p>
        <MainButton className={styles.button} onClick={handleNext}>
          {t("/payment/fail.button")}
        </MainButton>
      </div>
    </section>
  );
}

export default PaymentFailPage;