const { register, handleSubmit, formState: { errors } } = useForm({
  mode: 'onBlur',
  defaultValues: {
    email: '',
    password: ''
  }
});

const formFields = {
  email: register('email', {
    required: 'Email is required',
    pattern: {
      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
      message: 'Invalid email address'
    }
  }),
  password: register('password', {
    required: 'Password is required',
    minLength: {
      value: 8,
      message: 'Password must be at least 8 characters'
    }
  })
}

const validatePassword = (value) => {
  if (value.length < 8) {
    return 'Password must be at least 8 characters';
  }
  if (!/[A-Z]/.test(value)) {
    return 'Password must contain at least one uppercase letter';
  }
  if (!/[0-9]/.test(value)) {
    return 'Password must contain at least one number';
  }
  return true;
};

const onSubmit = async (data) => {
  try {
    const response = await submitForm(data);
    // Handle success
  } catch (error) {
    setError('root.serverError', {
      type: 'server',
      message: error.message || 'Something went wrong'
    });
  }
};

const ErrorMessage = ({ error }) => {
  if (!error) return null;

  return (
    <span className="error-message">
      {error.message}
    </span>
  );
};

const { errors } = formState;
const addressErrors = Object.keys(errors).filter(
  key => key.startsWith('address.')
);

if (addressErrors.length > 0) {
  setError('address', {
    type: 'group',
    message: 'Please check your address information'
  });
}

const ErrorSummary = ({ errors }) => {
  if (Object.keys(errors).length === 0) return null;

  return (
    <div className="error-summary">
      <h3>Please correct the following errors:</h3>
      <ul>
        {Object.values(errors).map((error, index) => (
          <li key={index}>{error.message}</li>
        ))}
      </ul>
    </div>
  );
};