import { useState } from 'react'
import useAuthStore from '../store/useAuthStore.js'
import { Link, useNavigate } from 'react-router-dom'
function Login() {
  const navigate = useNavigate()
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const { login } = useAuthStore()

  const handleLogin = async (e) => {
    e.preventDefault()
    const ok = await login(username, password)
    if (ok) navigate("/")
  }

  return (
    <div className='w-full h-screen'>
      <div className='w-full flex flex-col items-center justify-center h-full bg-slate-900'>
          <div className='w-1/2 bg-slate-950 rounded-lg px-8 py-12 flex flex-col items-center text-slate-600 shadow shadow-blue-600'>
            <h1 className='text-2xl text-white hover:scale-102 transition duration-300 hover:text-gray-50'>Login</h1>
            <form onSubmit={handleLogin} className='w-full'>
              <div className='p-4 flex flex-col w-full gap-2'>
                <label className='text-white text-xl'>Username</label>
                <input type="text" name="username" className='w-full outline-none px-4 py-4 text-xl border-2 rounded-lg shadow-md shadow-blue-800' onChange={e => setUsername(e.target.value)} />
              </div>
              <div className='p-4 flex flex-col w-full gap-2'>
                <label className='text-white text-xl'>Password</label>
                <input type="password" name="password" className='w-full outline-none px-4 py-4 text-xl border-2 rounded-lg shadow-md shadow-blue-800' onChange={e => setPassword(e.target.value)} />
              </div>
              <div className='p-4 flex flex-col w-full gap-2 items-center'>
              <button type="submit" className='w-full px-4 py-4 text-xl text-white italic bg-blue-800 rounded-lg shadow-md shadow-blue-800 hover:scale-102 transition duration-300'>Login</button>
                <span>Don't have an account? <Link to="/register" className='text-blue-200 hover:underline'>Register</Link></span>
              </div>
            </form>
            </div>
      </div>
    </div>
  )
}

export default Login