import React from 'react'
import { ErrorProps } from './typings'
import { ErrorComponentWrapper, ErrorComponent } from './styled'

/**
 * Render the default wrapper for error children
 */
export function defaultRenderWrapper(props: ErrorProps) {
  const { className, children } = props

  return (
    <ErrorComponentWrapper className={className}>
      {children}
    </ErrorComponentWrapper>
  )
}

/**
 * Render the default children view
 */
export function defaultRenderError(props: ErrorProps) {
  const { text, children } = props

  return (
    <ErrorComponent aria-role="alert" data-qa="qa-error-message">
      {text || children}
    </ErrorComponent>
  )
}