import React from "react";
import { AdminResetPasswordContainer } from "./index.styled";
import bg from "./assets/images/reset_password_bg.png";
import logo from "./assets/images/logo.png";
import { useNavigate } from "react-router-dom";
import ButtonComponent from "../button";
import InputComponent from "../input";
import { BackArrow } from "./assets/svg/back-arrow";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const AdminChangePassword = () => {
  const { findText } = useTranslation(wordStore);
  const navigate = useNavigate();
  return (
    <AdminResetPasswordContainer>
      <div className="img_container">
        <img src={bg} alt="" />
      </div>
      <div className="reset_form">
        <div className="rsf_header">
          <span onClick={() => navigate(-1)}>
            <BackArrow />
            {findText("Back")}{" "}
          </span>
          <img src={logo} alt="" />
        </div>

        <div className="form_card">
          <h5 className="reset_txt">{findText("RESET PASSWORD")}</h5>
          <p className="reset_subtile">
            {findText("Enter your email to reset your password")}
          </p>

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

            <ButtonComponent
              text={findText("Proceed")}
              styles={{
                width: "100%",
              }}
            />
          </form>
        </div>
      </div>
    </AdminResetPasswordContainer>
  );
};
export default AdminChangePassword;
