import { useState } from "react"
import useAuthStore from "../store/useAuthStore.js"
import { useNavigate } from "react-router-dom"
function Login() {
  const navigate = useNavigate()
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const { login } = useAuthStore()
  const handleSubmit = async(e) =>{
    e.preventDefault()
    await login(username, password)
    navigate("/dashboard")
  }
  return (
    <div  className="flex flex-col items-center justify-center content-center w-full my-8 rounded">
      <div className="w-1/3 bg-slate-800 flex flex-col items-center content-center justify-center rounded-xl px-6 py-12 gap-4">
        <h1 className="text-2xl hover:scale-104 transition duration-300">Login</h1>
        <form onSubmit={handleSubmit} className="flex flex-col w-full">
           <div className="flex flex-col gap-4 w-full">
              <label className="text-xl">Username</label>
              <input className="border-2 border-gray-500 rounded-md w-[99%] py-2 px-4 text-xl shadow-md outline-none" onChange={(e) => setUsername(e.target.value)} type="text" name="username" required />
           </div> 
           <div className="flex flex-col gap-4 mt-5">
              <label>Password</label>
              <input className="border-2 border-gray-500 rounded-md w-[99%] py-2 px-4 text-xl shadow-md outline-none" onChange={(e) => setPassword(e.target.value)} type="password" name="password" required />
           </div>
           <div className="mt-4">
              <button className="rounded-md w-[99%] py-2 px-4 text-xl shadow-md outline-none bg-purple-500 hover:scale-103 transition duration-300" type="submit">Login</button> 
              <p>don't have account? <a className="text-purple-500 hover:scale-104 transition duration-300" href="/register">Register</a></p>

           </div>
        </form>
      </div>
    </div>
  )
}

export default Login