import React from 'react'
import { NO_OP } 'uxui-modules/exotic'
import { wording } from 'src/words'
import { PaymentInformationPresetProps } from './typings'
import { FormFields } from './FormFields'
import { ErrorLabel, StyledSecondaryButton } from './styled'

function defaultRenderError(props: PaymentInformationPresetProps) {
  return <ErrorLabel content={wording.error} />
}

function defaultRenderForm(props: PaymentInformationPresetProps) {
  return (
    <React.Fragment>
      <FormFields {...props} />
      <StyledSecondaryButton
        onClick={(props && props.state && props.state.handleToggle) ? props.state.handleToggle : NO_OP}
        text={wording.cancel}
        {...props}
      />
    </React.Fragment>
  )
}

export { defaultRenderError, defaultRenderForm }