import React from "react";
import { AdminLoginContainer } from "./index.styled";
import bg from "./assets/images/login_bg.png";
import logo from "./assets/images/logo.png";
import { Link } from "react-router-dom";
import ButtonComponent from "../button";
import InputComponent from "../input";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const AdminLogin = () => {
  const { findText } = useTranslation(wordStore);
  return (
    <AdminLoginContainer>
      <div className="img_container">
        <img src={bg} alt="" />
      </div>

      <div className="login_form">
        <div className="lgf_header">
          <img src={logo} alt="" />
        </div>

        <div className="form_card">
          <h5 className="welcome_txt">{findText("WELCOME")}</h5>
          <p className="welcome_subtile">
            {" "}
            {findText("Please login to your admin dashboard")}{" "}
          </p>

          <form action="">
            <div className="form_group">
              <InputComponent
                inputType={findText("email")}
                label={findText("Email")}
                placeholder={findText("yourmail@mail.com")}
                hasError={false}
              />
            </div>
            <div className="form_group">
              <InputComponent
                inputType={findText("password")}
                label={findText("Password")}
                placeholder={findText("your password here")}
              />
            </div>

            <div className="forgot_pass_link">
              <Link to="/forgot-password">{findText("Forgot Password?")}</Link>
            </div>

            <ButtonComponent
              text={findText("Login")}
              styles={{
                width: "100%",
              }}
            />
          </form>
        </div>
      </div>
    </AdminLoginContainer>
  );
};
export default AdminLogin;
