text: import React, { useState } from 'react'
  import { Link } from 'react-router-dom';
  import { useForm } from 'react-hook-form';
  import { passwordReset } from '../firebase/auth';
  import { ToastContainer, toast } from 'react-toastify';
  
  function ForgotPassword() {
    const { register, handleSubmit, reset } = useForm();
    const [isLoading, setLoading] = useState(false);
  
    const onSubmit = async (data) => {
      setLoading(true);
      try {
        await passwordReset(data);
        toast.success('An email was sent to this email address!', {
          position: "top-center",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });
        reset();
      } catch (error) {
        // alert(error);
        toast.error('Please try again!', {
          position: "top-center",
          autoClose: 2000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });
      }
      setLoading(false);
    }
  
  
    const formClassName = `ui form ${isLoading ? 'loading' : ''}`;
  
    return (
      <div className="login-container">
          <ToastContainer
          position="top-center"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          />
        <div className="ui card login-card">
          <div className="content">
            <form className={formClassName} onSubmit={handleSubmit(onSubmit)}>
              <div className="field">
                <label>
                  Email
                  <input
                    type="email"
                    name="email"
                    placeholder="Email"
                    ref={register}
                    required
                  />
                </label>
              </div>
              <div className="field actions">
                <button className="ui primary button login" type="submit">
                  Reset Password
                </button>
                or
                <Link to="/login">Login</Link>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }
  
  export default ForgotPassword;
  