import { useForm, SubmitHandler, FieldValues } from 'react-hook-form';

const ContactForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const handleFormSubmission: SubmitHandler<FieldValues> = (data) => {
    console.log(data)
  };

  const handleFormError: SubmitHandler<FieldValues>  = (error) => {
    console.log(error)
  };

  return (
    <div>
        <form className="flex justify-center" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
          <div className="w-full">
            <div className=' flex flex-col justify-between space-y-4 w-full'>
              <div className='flex flex-row space-x-2'>
                <input placeholder='First Name' className='w-1/2' {...register('firstName', { required: true })} />
                <input placeholder='Last Name' className='w-1/2' {...register('lastName', { required: true })} />
                {errors.firstName && <p>First name is required.</p>}
                {errors.lastName && <p>Last name is required.</p>}
              </div>
              <div className="flex flex-row w-full">
                <textarea placeholder='Summary...' className="flex grow" {...register('summary')} />
                {errors.summary && <p>Please enter a message for your Project Inquiry.</p>}
              </div>
              <input className="bg-blue-600" type="submit" />
            </div>
          </div>
        </form>
    </div>
  );
};

export default ContactForm;