"use client"
import Image from 'next/image';
import Link from 'next/link';
import React, { useState } from 'react'
import { signIn } from "next-auth/react";


const LoginPage = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [loginInProgress, setLoginInProgress] = useState(false);

    async function handleFormSubmit(ev) {
      ev.preventDefault();
      setLoginInProgress(true)
      
      await signIn('credentials', {email, password, callbackUrl:'/', redirect: true});
      
      setLoginInProgress(false)

    }

    return (
    <div className='px-5 mt-10 mb-10'>
      <p className='text-center text-2xl font-semibold uppercase mb-5 text-[#FF5580]'>Login</p>
      <form className='block max-w-xs mx-auto' onSubmit={handleFormSubmit}>
        <input type='email' name="email" placeholder='Enter your email' value={email} onChange={ev => setEmail(ev.target.value)} disabled={loginInProgress} className=' disabled:bg-gray-300 disabled:cursor-not-allowed'/>
        <input type='password' name='password' placeholder='Enter your password' value={password} onChange={ev => setPassword(ev.target.value)} disabled={loginInProgress} className=' disabled:bg-gray-300 disabled:cursor-not-allowed'/>
        <button type='submit' disabled={loginInProgress} className='rounded-md bg-[#DCA0AE] text-white hover:opacity-80 duration-300 p-2 font-semibold block w-full disabled:cursor-not-allowed'>Login</button>
        <div>
          <p className='text-center text-gray-500 text-sm my-5'>Login with provider</p>
        </div>
        <button type='button' onClick={() => signIn('google', {callbackUrl:'/'})} className='w-full p-2 border border-[#DCA0AE] rounded-md hover:bg-gray-200 hover:border-gray-200 duration-300 bg-transparent text-black flex justify-center items-center gap-2'>
          <Image src='/google.png' width={20} height={20} alt='google-register'/> Login with Google
        </button>
        <div className='mt-5 text-center text-sm text-gray-500'>Don't have an account? 
            <Link href={'/register'} className='text-gray-700 font-semibold hover:underline'>Register</Link>
        </div>
      </form>
    </div>
  )
}

export default LoginPage