import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axiosInstance from '../../api/axiosConfig';


const ResetPasswordRequest = () => {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleResetRequest = async (e) => {
    e.preventDefault();
    try {
      await axiosInstance.post('http://localhost:5000/auth/forgot-password', { email });
      setMessage('Password reset email sent. Please check your inbox.');
    } catch (error) {
      setMessage('Error sending password reset email. Please try again.');
    }
  };

  return (
    <div className="flex flex-row min-h-screen justify-center items-center">
      <div className="reset-request-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4">
        <div className="w-full">
          <h1>reset password</h1>
          <p>enter your email to receive password reset instructions.</p>
          {message && <p className="message">{message}</p>}
          <form onSubmit={handleResetRequest} className="space-y-4">
            <label htmlFor="email" className="block"></label>
            <input
              type="email"
              id="email"
              name="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Enter your email"
              required
              className="input-field"
            />
            <button type="submit" className="reset-button">
              send reset instructions
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default ResetPasswordRequest;