import { useRegistrationForm } from 'next-on-rails/devise'

const RegistrationForm = ({ successCallback, errorCallback }) => {

const [register, getError] = useRegistrationForm(successCallback, errorCallback)

return (
  <form onSubmit={register}>
    <div className="form-group">
      <label htmlFor="form-registration-email">Email</label>
      <input
        id="form-registration-email"
        type="text"
        name="email"
        className={`form-control ${getError('email') ? 'is-invalid' : null}`}
      />
      {getError('email') ? <div className="invalid-feedback">{getError('email')}</div> : null}
    </div>
    <div className="form-group">
      <label htmlFor="form-registration-password">Password</label>
      <input
        id="form-registration-password"
        type="password"
        name="password"
        className={`form-control ${getError('password') ? 'is-invalid' : null}`}
        defaultValue="qwerty"
      />
      {getError('password') ? <div className="invalid-feedback">{getError('password')}</div> : null}
    </div>
    <div className="form-group">
      <label htmlFor="form-registration-password-confirmation">Confirm Password</label>
      <input
        id="form-registration-password-confirmation"
        type="password"
        name="password_confirmation"
        className={`form-control ${getError('password') ? 'is-invalid' : null}`}
        defaultValue="qwerty"
      />
      {getError('password_confirmation') ? (
        <div className="invalid-feedback">{getError('password_confirmation')}</div>
      ) : null}
    </div>
    <button type="submit" className="btn btn-primary">
      Register
    </button>
  </form>
)

}

export default RegistrationForm