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 useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const AdminResetPassword = () => {
  const { findText } = useTranslation(wordStore);
  return (
    <AdminResetPasswordContainer>
      <div className="img_container">
        <img src={bg} alt="" />
      </div>
      <div className="reset_form">
        <div className="rsf_header">
          <img src={logo} alt="" />
        </div>

        <div className="form_card">
          <h5 className="reset_txt">{findText("RESET PASSWORD")}</h5>
          <p className="reset_subtile">
            {findText("Secure your account with a strong password.")}
          </p>

          <form action="">
            <div className="form_group">
              <InputComponent
                inputType={findText("password")}
                label={findText("Password")}
                placeholder={findText("your password here")}
                required
              />
            </div>

            <div className="form_group mb_14">
              <InputComponent
                inputType={findText("password")}
                label={findText("Confirm Password")}
                placeholder={findText("your password here")}
                required
              />
            </div>

            <div className="hint_password">
              <span>{findText("Hint:")}</span>
              {findText(
                "passwords are more secure when you mix them with letters, numbers and special characters."
              )}
            </div>

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