import React from 'react'
import { isSafe } from 'exotic'
import { TextProps } from './typings'
import { TextWrapper, StyledText } from './styled'

function defaultRenderText(props: TextProps) {
  const { text, content, textColor, backgroundColor, backgroundImage } = props
  const label = isSafe(text) ? text : isSafe(content) ? content : ''
  return (
    <StyledText
      content={label}
      backgroundColor={backgroundColor}
      textColor={textColor}
      backgroundImage={backgroundImage}
    />
  )
}

function defaultRenderWrapper(props: TextProps) {
  const { className, dataQa, renderText, ...remainingProps } = props
  const textView = renderText(remainingProps)
  return (
    <TextWrapper className={className} data-qa={dataQa}>
      {textView}
    </TextWrapper>
  )
}

export { defaultRenderText, defaultRenderBox, defaultRenderWrapper }