import React, { useState, useEffect, useRef } from "react";
import { MobileLayoutContainer } from "./index.styled";
// import BackArrow from "./assets/svg/backArrow";
import img from "./assets/images/bg_img.png";
// import play from "./assets/svg/playstore.svg";
// import apple from "./assets/svg/apple.svg";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const MobileLayout = (props) => {
  const { findText } = useTranslation(wordStore);
  return (
    <MobileLayoutContainer>
      <div className="mlc_header">
        {/* <span>
          <BackArrow /> Back
         </span> */}
      </div>
      <div className="mlc_img">
        <img src={img} alt={findText("bg")} />
      </div>

      <div className="mlc_note_container">
        <p className="mlc_note_title">
          {props?.findText(
            "Sorry, you can’t access your account on a mobile browser.",
          )}
        </p>
        <p className="mlc_note_subtitle">
          {props?.findText(
            "For better user accessibility, login with a desktop device.",
          )}
          {/* or via our mobile app */}
        </p>

        {/* <div className="mlc_link_section">
          <a href="#">
            <img src={play} alt="play store" /> {props?.findText("Download on google play")}
          </a>
          <a href="#">
            <img src={apple} alt="apple store" /> {props?.findText("Download on apple store")}
          </a>
         </div> */}
      </div>
    </MobileLayoutContainer>
  );
};
export default MobileLayout;
