import React, { useState } from 'react'

import Layouts from '../../componets/layout/Layouts'

import axios from 'axios'

import { useNavigate } from 'react-router-dom';

import 'react-toastify/dist/ReactToastify.css';

import { toast } from 'react-toastify';

const Register = () => {

 const [name ,setName] = useState('')

 const [email ,setEmail] = useState('')

 const [password ,setPassword] = useState('')

 const [phone ,setPhone] = useState('')

 const [address ,setAddress] = useState('')

 const [answers ,setAnswers] = useState('')

 const navigator = useNavigate()

//form funaction

const handleSumbit =async(event)=>{

    event.preventDefault();

  try {

    const  reses = await axios.post("/api/v1/auth/register",

    {

      name,

      email,

      password,

      phone,

      address,

      answers,

    })

      if(reses.data.success){

      toast.success(reses.data.message)

      navigator('/login')

    }

   

  } catch (error) {

    toast.error('some wrong ')

   

  }

   

 

}

   return (

     <Layouts>

        <div  className='register-eco'>

        <form onSubmit={handleSumbit}  >

   <div className="form-group">

    <label htmlFor="exampleInputEmail1">Name</label>

    <input type="Name"  

    value={name}

    onChange={(e)=>setName(e.target.value)}

    className="form-control"

    id="exampleInputphone"

    aria-describedby="emailHelp"

    placeholder="Enter Name"

    required

    //    required  is the attribute is use full for from need value emty value dont allow

    />

  </div>

  <div className="form-group">

    <label htmlFor="exampleInputEmail1">Register From</label>

    <input type="email"

    value={email}

    onChange={(e)=>setEmail(e.target.value)}

    className="form-control"

    id="exampleInputregister" aria-describedby="emailHelp"

    placeholder="Enter email"

    required

    />

  </div>

 

  <div className="form-group">

    <label htmlFor="exampleInputPassword1">Password</label>

    <input type="password"

    value={password}

    onChange={(e)=>setPassword(e.target.value)}

    className="form-control" id="exampleInputPassword1"

    placeholder="Password"

    required

    />

  </div>

  <div className="form-group">

    <label htmlFor="exampleInputEmail1">Phone</label>

    <input type="phone"

    value={phone}

    onChange={(e)=>setPhone(e.target.value)}

    className="form-control"

    id="exampleInputPhone" aria-describedby="emailHelp"

     placeholder="Enter Phone"

     required

     />

  </div>

  <div className="form-group">

    <label htmlFor="exampleInputEmail1">Address</label>

    <input type="address"

    value={address }

    onChange={(e)=>setAddress(e.target.value)}

    className="form-control" id="exampleInputAddress" aria-describedby="emailHelp" placeholder="Enter Address"

    required

    />

  </div>

  <div className="form-group">

    <label htmlFor="exampleInputanswer">your fvt colour</label>

    <input type="answer"

    value={answers }

    onChange={(e)=>setAnswers(e.target.value)}

    className="form-control" id="exampleInputanswer" aria-describedby="emailHelp" placeholder="your fvt colour"

    required

    />

</div>

  <button type="submit" className="btn btn-primary">Submit</button>

</form>

         

        </div>

     </Layouts>

  )

}

export default Register