import React from 'react'
import PropTypes from 'prop-types'
import Icon from 'react-uikit/icon'
import ToastBase from '../base'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const ToastWithIcon = ({children, iconName, isShowing, ...props}) => {
    const iconClasses = bem.classNames('c-toast-with-icon__icon')
    const contentClasses = bem.classNames('c-toast-with-icon__content')

    return (
        <ToastBase {...props} isShowing={isShowing}>
            <div className={contentClasses}>
                {iconName && <Icon className={iconClasses} name={iconName} />}
                {children}
            </div>
        </ToastBase>
    )
}

ToastWithIcon.propTypes = {
    children: PropTypes.node,
    iconName: PropTypes.string,
    isShowing: PropTypes.bool,
}

export default ToastWithIcon