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

const VerifyPage: 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.alreadySuccess"))}
            </h1>
          </div>

          <section className={styles.form}>
            <dl className={`${styles.formList} ${styles.hasbg}`}>
              <dt className={styles.formTitle} />
              <dd className={`${styles.full} ${styles.alignCenter}`}>
                <img
                  src={check_circle}
                  alt="chedk"
                  className={styles.formDone}
                />
              </dd>
              <dd className={`${styles.full} ${styles.alignCenter}`}>
                {t(getTranslationID("signupVerifyPage.text.alreadySuccess"))}
              </dd>
              <dd className={`${styles.full} ${styles.alignCenter}`}>
                <a href="/" className={styles.linkTx}>
                  {t(getTranslationID("signupVerifyPage.label.returnToSignIn"))}
                </a>
              </dd>
            </dl>
          </section>
        </div>
      </main>

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

export default VerifyPage;
