import { useState } from "react";
import axios from '../axiosInstance'
import { useNavigate } from "react-router-dom";

function Register (){
    const [username, setUsername] = useState('')
      const [password, setPassword] = useState('')
    const [error, setError] = useState('')
    const navigate = useNavigate()

    const handleRegister = async(e) => {
        e.preventDefault()
        setError('')
        try{
const res = await axios.post('http://localhost:5000/api/user/register',{
    username,
    password
});
 
navigate("/login")
window.location.reload()
        }catch(error){
setError("Failed to register")
        }
    };
    return(
        <div  className=" min-h-screen flex flex-col justify-center bg-slate-800 px-96 ">
            <div className="bg-slate-900 border border-slate-800 text-white p-8 rounded-2xl  max-w-md shadow-2xl space-y-6">
                <h2 className="text-2xl font-medium px-5 p-7 text-black">Register</h2>
                {error &&(
                    <div className="bg-rose-950 border border-rose-800 text-rose-300 text-xs p-3 rounded-xl font-medium justify-center">
                        <p>{error}</p> 
                        </div>
                )}

                <form onSubmit={handleRegister} className="space-x-0">

                      <label>User Name</label>
            <input type="name" placeholder="Enter ur Username" required
             className="w-full bg-slate-800 border border-slate-700 p-3 rounded-xl text-sm
             focus:outline-none focus:border-blue-500 transition"
            onChange={(e) => setUsername(e.target.value)} />

            <label>Password</label>
            <input type="password" placeholder="fill in ur password" required
             className="w-full bg-slate-800 border border-slate-700 p-3 rounded-xl text-sm
             focus:outline-none focus:border-blue-500 transition"
            onChange={(e) => setPassword(e.target.value)} />

            <button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 
            rounded-xl transition shadow-lg shadow-blue-900/20">Register</button>
            <p className="text-center text-xs text-slate-400 pt-2">Arleady have an Account <a href="/login"
           className="text-blue-400 hover:underline font-semibold" >Login</a></p>
                </form>
            </div>
        </div>
    )
}
export default Register