import { useForm } from "react-hook-form";

export default function App() {
   const { register, handleSubmit, watch, formState: { errors } } = useForm();
   const onSubmit = data => console.log(data);

   return (
      /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
      <form onSubmit={handleSubmit(onSubmit)}>
         <div className="Contact">
            <h1>Contactez-nous!</h1>
            <div className="Error_color">
               <div>
                  <div>
                     <label>Nom*</label>
                  </div>
                  {/* include validation with required or other standard HTML validation rules */}
                  <input {...register("Nom", { required: true, minLength: 2 })} />
                  {/* errors will return when field validation fails  */}
                  <div>
                     {errors.Nom && errors.Nom.type === 'required' && <span>Vous devez entrer votre nom!</span>}
                     {errors.Nom && errors.Nom.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
                  </div>
               </div>

               <div>
                  <div>
                     <label>Email*</label>
                  </div>
                  <input {...register("Email", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
                  <div>
                     {errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse!</span>}
                     {errors.Email && errors.Email.type === 'pattern' && <span>Adresse non valide!</span>}
                  </div>
               </div>

               <div>
                  <div>
                     <label>Téléphone*</label>
                  </div>
                  <input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
                  <div>
                     {errors.Téléphone && errors.Téléphone.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
                     {errors.Téléphone && errors.Téléphone.type === 'pattern' && <span>Téléphone non valide!</span>}
                  </div>
               </div>

               <div>
                  <div>
                     <label>Message</label>
                  </div>
                  <textarea {...register("Message")} />
               </div>
            </div>



            <input type="submit" value="Contacter" />
         </div>

      </form>
   );
}