import { useState } from 'react'
import { Link } from 'react-router-dom'
import useAuthStore from '../stores/useAuthStore.js'
function Login() {
        const { login } = useAuthStore()
        const [username, setUsername] = useState("")
        const [password, setPassword] = useState("")
        const handleSubmit = async(e) => {
            e.preventDefault()
            await login(username, password)
        }
      return (
        <div className="min-h-screen bg-slate-100 flex items-center justify-center">
            <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
                <h1 className="text-2xl font-bold text-slate-800 mb-6 text-center">Login</h1>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label htmlFor="username" className="block text-sm font-medium text-slate-700 mb-1">Username</label>
                        <input  required type="text" id="username" value={username} onChange={(e) => setUsername(e.target.value)} className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all" />
                    </div>
                    <div>
                        <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1">Password</label>
                        <input  required type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all" />
                    </div>
                    <div className="flex flex-col gap-3">
                        <button type="submit" className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">Login</button>
                        <span className="text-center text-slate-600 text-sm">Don't have an account? <Link to="/register" className="text-indigo-600 hover:text-indigo-700 font-medium">Register</Link></span>
                    </div>
                </form>
            </div>
        </div>
      )
}

export default Login