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

function Register() {
    const [name, setName] = useState('')
    const [email, setEmail] = 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',{
        name,
        email,
        password
      });
       
      navigate('/login')
      
        }catch(error){
      setError('Registration failed')
        }
    }
    return(
        <div className="min-h-screen bg-amber-200 p-6">
            <h2 className="text-2xl font-bold text-gray-800 mb-1"> Register</h2>
            {error && <p> {error}</p>}
            <form onSubmit={handleRegister} className="bg-white rounded-2xl border-gray-500 p-6
            mb-4 flex flex-col gap-3 w-150">

                <label className="text-sm font-medium text-gray-400">Name</label>
                <input type="name" placeholder="Enter ur Name" required  className="border border-black-300
            rounded-1g px-20 py-1 text-sm focus:outline-none focus:border-pink-200"
                onChange={(e) => setName(e.target.value)}/>

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

                <label className="text-sm font-medium text-gray-400">Password</label>
                <input type="password" placeholder="Password required" required  className="border border-black-300
            rounded-1g px-20 py-1 text-sm focus:outline-none focus:border-pink-200"
                onChange={(e) => setPassword(e.target.value)}/>

                <button type="submit" className="bg-amber-300 text-shadow-white font-medium 
            py-1  rounded-1g hover:bg-olive-400 transition-colors">Register</button>
                <p className="text-sm text-gray-800 mt-4 w-50 flex gap-8"> Arleady have an account<a href="/login" className="
            text-mauve-800  font-medium hover:underline">Login</a></p>
            </form>
        </div>
    )
}
export default Register