import React, {useState} from "react";
import { Link, useNavigate } from "react-router-dom";
import API from "../api/api";

const Login = () => {
   const navigate = useNavigate()

   const [form, setForm] = useState({
      email: "",
      password: ""
   })
   const handleChange = (e) => {
      setForm({
         ...form, [e.target.name]: e.target.value
      })
   }
   const handleSubmit = async(e) => {
      e.preventDefault()
      try{
         const res = await API.post("/login", form)
      } catch(error) {
         console.log(error)
         
      }
      navigate("/dashboard")
   }

   return (
      <>
         <div className="w-full h-screen flex items-center justify-center">
            <div className="w-1/4 h-5/12 border-2 border-cyan-500 rounded-2xl flex flex-col items-center justify-evenly">
               <div className="w-full flex items-center justify-center">
                  <p className="font-semibold text-2xl text-(--text-main)">Login</p>
               </div> 
               <div className="w-full h-3/7 flex flex-col items-center justify-evenly">
                  <input type="email" name="email" onChange={handleChange} placeholder="Email" className="border border-(--bg-maj) text-(--text-maj) w-10/11 h-1/3 rounded-xl placeholder:text-(--text-maj)/40 text-sm pl-4 pr-3 outline-none" />
                  <input type="password" name="password" onChange={handleChange} placeholder="Password" className="border border-(--bg-maj) text-(--text-maj) w-10/11 h-1/3 rounded-xl placeholder:text-(--text-maj)/40 text-sm pl-4 pr-3 outline-none" />
               </div>
               <div className="w-full h-1/8 flex justify-center">
                  <button onClick={handleSubmit} className="w-10/11 h-10 rounded bg-(--bg-maj)">Submit</button>
               </div>
               <div className="w-full flex items-center justify-center"><p className="text-(--text-main) text-sm font-light">Don't have an account? <Link to="/register" className="text-(--text-maj) hover:underline">Register</Link></p></div>
            </div>
         </div>
      </>
   )
}

export default Login