 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import axios from "axios";

 function Login(){
const navigate = useNavigate()
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState('')

const handleLogin = async (e) => {
  e.preventDefault()
  try{
    const res = await axios.post('http://localhost:5000/api/users/login', {
      email,
      password,
    })
    localStorage.setItem('user', JSON.stringify(res.data))
    navigate('/dashboard')
  }catch(error){
    setError('invalid email or password')
  }
} 

  return(
    
    <div className="min-h-screen bg-gray-100 p-6"> 
 <h2 className="text-2xl  font-bold text-gray-800 mb-1 ">Login</h2>
         {error && <p className="bg-red-50 text-red-500 text-sm
         w-fit rounded-1g py-3 mb-4 px-15">{error}</p>}


         <form onSubmit={handleLogin} className=" bg-white rounded-2xl border border-gray-500
         p-6 mb-8 flex flex-col gap-4 max-w-m w-150 ">
          <div className="flex flex-col gap-2"> 

          <label className="text-sm font-medium text-gray-600">Email</label>
          <input type="Email" placeholder="enter ur email" onChange={(e) => setEmail(e.target.value)}
          required
                        className=" border border-black-300 rounded-1g  px-20 py-1 
            text-sm focus:outline-none focus:border-orange-400" 
          />

          <label className="text-sm font-medium text-black-300">Password</label>
          <input type="password" placeholder="enter ur password"
           onChange={(e) => setPassword(e.target.value)}
          required    className=" border border-black-300 rounded-1g  px-20 py-1 
            text-sm focus:outline-none focus:border-orange-400" 
          />
          </div>
          <button type="submit" 
           className="bg-orange-500 text-white font-medium 
          py-2 rounded-lg hover:bg-orange-600 transition-color"
          >Login</button>

         </form>
         <p className="text-sm text-gray-5 mt-4 w-50">Don't have an account?
           <Link to='/register' className="text-orange-500 font-medium hover:underline">Register</Link></p>
         </div>
  )
 }

 export default Login