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

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

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

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

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