import React from 'react'
import { wording } from 'src/words'
import { ResetPasswordFormProps } from './typings'
import { HeaderWrapper, ResetPasswordFormWrapper } from './styled'
import { Form } from './Form'

// rendering heading
function defaultRenderHeading(props: ResetPasswordFormProps) {
  return <HeaderWrapper>{wording.resetPasswordTitle}</HeaderWrapper>
}

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

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

export { defaultRenderWrapper, defaultRenderHeading, defaultRenderFormFields }