import React, { useContext } from "react";
import { LanguageContext } from "../../backend/LanguageContext";

import next from "../../icons/next.svg";
import next_reverse from "../../icons/next-reverse.svg";

const NotAUser = ({
  setStage,
  stage,
  errMessage,
  errMessageEn,
  errMessageTkm,
}) => {
  const { locale } = useContext(LanguageContext);

  return (
    <section className="imm-cs-1 cs-1">
      <form>
        <h2 className="notauser-title">
          {errMessage
            ? locale === "TKM"
              ? errMessageTkm
              : locale === "РУС"
              ? errMessage
              : locale === "ENG"
              ? errMessageEn
              : errMessageTkm
            : "Ошибка"}
        </h2>
        <div className="cu-bottom cd-2-title">
          <button
            type="button"
            className="sign-btn reg-btn"
            onClick={() => setStage((stage) => stage - 2)}
          >
            <div>
              <div className="btn-img">
                <img src={next_reverse} alt="logout" />
              </div>
              <h3>
                {locale === "TKM"
                  ? "Yza"
                  : locale === "РУС"
                  ? "Назад"
                  : locale === "ENG"
                  ? "Back"
                  : "Yza"}
              </h3>
            </div>
          </button>
          {/* <button
          type="button"
          className="sign-btn cu-btn"
          onClick={() => setStage(4)}
        >
          <div>
            <h3>
              {locale === "TKM"
                ? "Dowam et"
                : locale === "РУС"
                ? "Подтвердить  "
                : locale === "ENG"
                ? "Proceed"
                : "Dowam et"}
            </h3>
            <div className="btn-img">
              <img src={next} alt="logout" />
            </div>
          </div>
        </button> */}
        </div>
      </form>
    </section>
  );
};

export default NotAUser;
