import { useNavigate } from "react-router-dom";

import { AppShell } from "../components/AppShell";
import { Icon } from "../components/Icon";
import { ru } from "../content/ru";

// A1 · Выбор способа входа
export function Welcome() {
  const navigate = useNavigate();
  const t = ru.welcome;

  return (
    <AppShell signedIn={false}>
      <div className="stack">
        <header className="head">
          <h1 className="h1">{t.title}</h1>
          <p className="lead">{t.lead}</p>
        </header>

        <div className="entry-grid">
          <button type="button" className="entry entry--emias" onClick={() => navigate("/emias")}>
            <span className="entry__top">
              <span className="tile-icon tile-icon--teal">
                <Icon name="docPlus" size={26} />
              </span>
              <span className="chip chip--teal">{ru.common.recommended}</span>
            </span>
            <span className="entry__title">
              {t.emias.title}
              <Icon name="chevronRight" />
            </span>
            <span className="entry__text">{t.emias.text}</span>
          </button>

          <button type="button" className="entry" onClick={() => navigate("/anonymous")}>
            <span className="entry__top">
              <span className="tile-icon">
                <Icon name="lock" size={26} />
              </span>
            </span>
            <span className="entry__title">
              {t.anonymous.title}
              <Icon name="chevronRight" />
            </span>
            <span className="entry__text">{t.anonymous.text}</span>
          </button>
        </div>

        <p className="muted small">{t.disclaimer}</p>
      </div>
    </AppShell>
  );
}