import React from 'react'
import { wording } from 'src/words'
import Empty from 'atoms/Empty'
import { SignUpFormProps } from './typings'
import { SignUpFormWrapper, StyledHeading } from './styled'
import { SignUpFormView } from './Form'

// rendering heading
function defaultRenderHeading(props: SignUpFormProps) {
  return <StyledHeading breedType={'h2'} content={wording.createAnAccountLabel} />
}

// rendering the form fields
function defaultRenderFormFields(props: SignUpFormProps) {
  return <SignUpFormView {...props}/>
}

// rendering the form fields buttons
function defaultRenderButtons(props: SignUpFormProps) {
  return <Empty />
}

// rendering the main wrapper
function defaultRenderWrapper(props: SignUpFormProps) {
  const { className, children } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <SignUpFormWrapper {...passThroughProps}>{children}</SignUpFormWrapper>
}

export {
  defaultRenderWrapper,
  defaultRenderHeading,
  defaultRenderFormFields,
  defaultRenderButtons,
}