import * as React from 'react'
import { FormRenderProps } from './typings'
import { StyledForm, StyledSubmitButton } from './styled'

export const defaultRenderForm = (props: FormRenderProps) => (
  <StyledForm
    className={props.className}
    id={props.id}
    aria-invalid={props.state.isValid === false}
    onSubmit={props.onSubmit}
  >
    {props.children}
  </StyledForm>
)
export const defaultRenderButtonGroup = (props: FormRenderProps) => (
  // onClick={props.onSubmit} < is not submit
  <StyledSubmitButton onClick={props.onSubmit as any}>
    Continue
  </StyledSubmitButton>
)