'use client'
import { link } from 'fs'
import Link from 'next/link'
import { AuthContext } from '../components/AuthContext'
import { useContext, useEffect, useState } from 'react';

// import NetflixLogo from '../../../public/images/netflix_logo.svg'

export default function PasswordRecovery() {
  const user = useContext(AuthContext);
  const [email, setEmail] = useState('');

  useEffect(() => {
    // Check if user is authenticated
    if (!user) {
      // Redirect or perform any necessary action
    } else {
      // User is authenticated, continue with desired logic
      setEmail(user.email)
    }
  }, [user]);

  return (
    <div className='text-white flex flex-col items-center justify-center h-screen'>
      <h1 className='text-2xl font-bold mb-6'>Password Recovery</h1>
      <form className='w-64'>
        <div className='mb-4'>
          <label htmlFor='email' className='block font-medium mb-1'>Email:</label>
          <input type="email" id='email' value={email} className='w-full px-3 py-2 border rounded text-black' onChange={e => setEmail(e.target.value)}/>
        </div>
            <button className='w-full py-2 bg-red-600 text-white font-medium rounded'>
              Recover
            </button>
      </form>

       <div className="mt-4">
         Do you have an account?{' '}
               <Link href='../login' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
                 <p>Login</p>
               </Link>
       </div>
    </div>
  );
}