import { useState } from 'react';
import axios from 'axios';
import '../styles/ForgotPassword.css';

const ForgotPassword = () => {
  const [email, setEmail] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('/api/forgot-password', { email });
      console.log('Response:', response.data);
      alert('Password reset link sent to your email');
    } catch (error) {
      console.error('Failed to send password reset link', error);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
      <div className="flex flex-col md:flex-row bg-white rounded-lg shadow-md overflow-hidden w-full max-w-4xl">
        <div className="md:w-1/2 flex justify-center items-center bg-gray-100">
          <img src="/public/HiDigiH.jpg" alt="HiDigi Logo" style={{ height: '250px', width: '250px' }} />
        </div>
        <div className="md:w-1/2 p-8">
          <h2 className="text-2xl font-bold mb-6 text-center">Forgot Password</h2>
          <form onSubmit={handleSubmit}>
            <div className="mb-4">
              <label className="block text-gray-700 mb-2">Email</label>
              <input
                type="email"
                name="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full p-3 border border-gray-300 rounded"
                placeholder="Type your email"
                required
              />
            </div>
            <button type="submit" className="w-full bg-blue-500 text-white py-3 px-4 rounded mt-4 hover:bg-blue-600">Send Reset Link</button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default ForgotPassword;