import React from "react";
import Header from "components/header";
import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
import { useTranslation } from "react-i18next";
import { getTranslationID } from "translation";
import styles from "styles/app.module.scss";

const SupportPage: React.FC = () => {
  const { t } = useTranslation();

  return (
    <div className={styles.wrap}>
      <Header />
      <UpdateTokenTimer />
      <main className={styles.main}>
        <div>
          <div className={styles.pageHeader}>
            <h1 className={styles.pageTitle}>
              {t(getTranslationID("supportPage.label.title"))}
            </h1>
          </div>

          <section className={styles.support}>
            <div>
              <h2>{t(getTranslationID("supportPage.label.howToUse"))}</h2>

              <div className={styles.txContents}>
                <ul className={styles.listDocument}>
                  <li>
                    <a
                      // TODO: 将来的に正式なURLに変更する
                      href="/support"
                      target="_blank"
                      className={styles.linkTx}
                    >
                      {t(
                        getTranslationID("supportPage.label.supportPageEnglish")
                      )}
                    </a>
                  </li>
                  <li>
                    <a
                      // TODO: 将来的に正式なURLに変更する
                      href="/support"
                      target="_blank"
                      className={styles.linkTx}
                    >
                      {t(
                        getTranslationID("supportPage.label.supportPageGerman")
                      )}
                    </a>
                  </li>
                  <li>
                    <a
                      // TODO: 将来的に正式なURLに変更する
                      href="/support"
                      target="_blank"
                      className={styles.linkTx}
                    >
                      {t(
                        getTranslationID("supportPage.label.supportPageFrench")
                      )}
                    </a>
                  </li>
                  <li>
                    <a
                      // TODO: 将来的に正式なURLに変更する
                      href="/support"
                      target="_blank"
                      className={styles.linkTx}
                    >
                      {t(
                        getTranslationID("supportPage.label.supportPageSpanish")
                      )}
                    </a>
                  </li>
                </ul>

                <p className={styles.txNormal}>
                  {t(getTranslationID("supportPage.text.notResolved"))}
                </p>
              </div>
            </div>
          </section>
        </div>
      </main>
    </div>
  );
};
export default SupportPage;
