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 { Link, useNavigate } from 'react-router-dom';
import { BackArrow } from './assets/svg/back-arrow';
import success from './assets/images/success.png';
import ButtonComponent from '../button';

// flow for Password Reset Link Sent Successfully and Password Reset Successfully Success screen
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const AdminPasswordSuccess = ({
  title,
  subtitle,
  backButton = true,
  goToLogin = false,
  onClick,
}) => {
  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">
          {backButton && (
            <span onClick={() => navigate(-1)}>
              <BackArrow />
              {findText("Back")}{" "}
            </span>
          )}

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

        <div className="success_group">
          <div className="sg_img">
            <img src={success} alt="" />
          </div>

          <p className="sgc_title"> {title} </p>
          <p className="sgc_subtitle">{subtitle}</p>

          {goToLogin && (
            <ButtonComponent
              text={findText("Go to Login")}
              styles={{
                width: "100%",
              }}
              onClick={onClick}
            />
          )}
        </div>
      </div>
    </AdminResetPasswordContainer>
  );
};
export default AdminPasswordSuccess;
