import React from 'react'
import { fromIshToString } from 'exotic'
import { TextProps } from './typings'
import { TextWrapper, CustomText } from './styled'

function defaultRenderText(props: TextProps) {
  const { text } = props
  const validText = fromIshToString(text)
  return <CustomText dangerouslySetInnerHTML={{ __html: validText }} />
}

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, defaultRenderWrapper }