import React from 'react'
import { isFunction } from 'exotic'
import { IconWithTextProps } from './typings'
import {
  defaultRenderIcon,
  defaultRenderText,
  defaultRenderWrapper,
} from './renderProps'

class IconWithText extends React.PureComponent<IconWithTextProps> {
  static defaultProps = {
    className: '',
    iconPosition: 'prefix',
    iconType: 'heart',
    text: 'Favorites',
    tagType: 'h6',
    // renderProps
    renderIcon: defaultRenderIcon,
    renderText: defaultRenderText,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const { renderWrapper, renderText, renderIcon, ...remainingProps } = this.props
    const children = (
      <React.Fragment>
        {isFunction(renderIcon) && renderIcon(remainingProps)}
        {isFunction(renderText) && renderText(remainingProps)}
      </React.Fragment>
    )
    const view = isFunction(renderWrapper) && renderWrapper({children, ...remainingProps})
    return view
  }
}

export { IconWithText }
export default IconWithText