import React from "react";
import Header from "components/header";
import Footer from "components/footer";
import styles from "styles/app.module.scss";
import { useTranslation } from "react-i18next";
import { getTranslationID } from "translation";
import report from "../../assets/images/report.svg";

const VerifyFailedPage: React.FC = (): JSX.Element => {
  const { t } = useTranslation();

  return (
    <div className={styles.wrap}>
      <Header />

      <main className={styles.main}>
        <div className={styles.mainSmall}>
          <div>
            <h1 className={styles.marginBtm1}>
              {t(getTranslationID("signupVerifyPage.label.faild"))}
            </h1>
          </div>

          <section className={styles.form}>
            <dl className={`${styles.formList} ${styles.hasbg}`}>
              <dt className={styles.formTitle} />
              <dd className={`${styles.full} ${styles.alignCenter}`}>
                <img src={report} alt="chedk" className={styles.formDone} />
              </dd>
              {/** XXX: 改行に対応するためにここでstyleを当てている。
               * デザインを修正していただいたらもとに戻す
               */}
              <dd
                style={{ whiteSpace: "pre-line" }}
                className={`${styles.full} ${styles.alignCenter}`}
              >
                {t(getTranslationID("signupVerifyPage.text.faild"))}
              </dd>
            </dl>
          </section>
        </div>
      </main>

      <Footer />
    </div>
  );
};

export default VerifyFailedPage;
