 import { useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import axios from 'axios'
 
 function Register(){
  const navigate = useNavigate()
  const [email, setEmail] = useState('')
  const [userName, setUserName] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')

  const handleRegister = async (e) => {
    e.preventDefault()
    try{
      await axios.post('http://localhost:5000/api/users/register',{ 
        email,
        userName,
        password
    });
    navigate('/')
    }catch(error){
      setError('Registration failled. try again')
    }
  }
return(
  <div className=' min-h-screen bg-gray-100 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 border-gray-500 p-6 mb-8 
    flex flex-col gap-2 w-150 '
    >
      <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 rounded-1g px-20 py-1 text-sm
      focus:outline-none focus:border-orange-400'
      />
 <label className='text-sm font-medium text-gray-600'>Name</label>
      <input type="text" placeholder="enter ur name" onChange={(e) => setUserName(e.target.value)}
      required
      className='text-sm border border-black rounded-1g px-20 py-1 
      focus:outline-none focus:border-orange-400'
      />
 <label className='text-sm font-medium text-gray-600'>Password</label>
      <input type="password" placeholder="enter ur password" onChange={(e) => setPassword(e.target.value)}
      required
      className='border border-black rounded-1g px-20 py-1 text-sm
      focus:outline-none focus:border-orange-400'
      />
 
      <button type='submit' className='bg-orange-500 text-white font-medium
      py-2 rounded-1g hover:bg-orange-600 transition-colors'>Register</button>

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

 }

 export default Register