import React from 'react'
import { isSafe } from 'exotic'
import { ButtonProps } from './typings'
import { ButtonWrapper, StyledButton } from './styled'

function defaultRenderButton(props: ButtonProps) {
  const { text, content, textColor, backgroundColor } = props
  const label = isSafe(text) ? text : isSafe(content) ? content : 'button'
  return (
    <StyledButton
      breedType="text"
      text={label}
      textColor={textColor}
      backgroundColor={backgroundColor}
    />
  )
}

function defaultRenderWrapper(props: ButtonProps) {
  const { className, dataQa, renderButton, ...remainingProps } = props
  const buttonView = renderButton(remainingProps)
  return (
    <ButtonWrapper className={className} data-qa={dataQa}>
      {buttonView}
    </ButtonWrapper>
  )
}

export { defaultRenderButton, defaultRenderWrapper }