const renderField = ({ input, label, type, placeholder, message , meta: { touched, error, warning } }) => (
    <Form.Field >
      <label className="new-font">{label}</label>
      <Input {...input} type={type} className="new-font" placeholder={placeholder} />
      {touched && error &&
        <div>
          <Label
            basic
            color='red'
            pointing
            className="new-font"
          >
          {error}
          </Label>
        </div>
      }

      {(input.name === ('desc') || input.name === ('hyperlink')) ?
       <Message compact>
         {message}
       </Message> : <span></span>
      }
    </Form.Field>
  )

function validate(values){
  const errors ={};
  if(!values.name){
    errors.name='Please let me know who I should thank!';
  }
  if(!values.email){
    errors.email='Please enter an email address';
  }
  if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)
  ) {
    errors.email = 'Please enter a valid email address e.g test@gmail.com'
  }
  if(values.desc && values.desc.length > 50 ){
    errors.desc="Key in 50 characters or less";
  }
  if(!values.hyperlink){
    errors.hyperlink="Insert a URL address here to your favourite website!";
  }
  return errors;
}