import { useNavigate } from "react-router-dom";
import { useTranslations } from "@/hooks/translations";
import routes from "@/routes";
import styles from "./styles.module.css";
import Title from "@/components/Title";
import MainButton from "@/components/MainButton";
import { ELocalesPlacement } from "@/locales";

function PaymentFailPage(): JSX.Element {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  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">{translate("/payment/fail.title")}</Title>
        <p className={styles.list}>{translate("/payment/fail.description1")}</p>
      </div>
      <div className={styles.bottom}>
        <p className={styles.description}>{translate("/payment/fail.description2")}</p>
        <MainButton className={styles.button} onClick={handleNext}>
          {translate("/payment/fail.button")}
        </MainButton>
      </div>
    </section>
  );
}

export default PaymentFailPage;