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

const SignupCompletePage: 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("signupCompletePage.label.title"))}
            </h1>
          </div>

          <section>
            <dl className={`${styles.formList} ${styles.hasbg}`}>
              <dt className={styles.formTitle} />
              <dd className={`${styles.full} ${styles.alignCenter}`}>
                <img src={emailCheck} alt="check" className={styles.formDone} />
              </dd>
              <dd className={`${styles.full} ${styles.alignCenter}`}>
                {t(getTranslationID("signupCompletePage.text.createdInfo"))}
              </dd>
            </dl>
          </section>
        </div>
      </main>
      <Footer />
    </div>
  );
};

export default SignupCompletePage;
