import React from 'react'
import { getFlexOrderByAlignType } from 'src/components/deps'
import { additionalPaths } from 'atoms/MaterialIcon'
import { Wrapper, StyledIcon, StyledText } from './styled'
import { IconWithTextProps } from './typings'

function defaultRenderIcon(props: IconWithTextProps) {
  const { iconType, iconPosition = 'prefix' } = props
  const order = getFlexOrderByAlignType(iconPosition)
  const view = (
    <StyledIcon type={iconType} customPaths={additionalPaths} order={order} />
  )
  return view
}

function defaultRenderText(props: IconWithTextProps) {
  const { text, tagType } = props
  const view = <StyledText breedType={tagType} content={text} />
  return view
}

function defaultRenderWrapper(props: IconWithTextProps) {
  const { dataQa, children, className } = props
  const passThroughProps = {
    className,
    'data-qa': dataQa,
  }
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export { defaultRenderIcon, defaultRenderText, defaultRenderWrapper }