import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Icon from '../Icon';
import Translate from '../Translate';
import './style.scss';

const Badge = ({
    size,
    label,
    type,
    icon,
    iconColor,
}) => {
    const classes = classNames('Badge', {
        [`Badge_${size}`]: size,
        [`Badge_${type}`]: type,
    });

    const iconElement = icon
        ? (<Icon
            name={icon}
            size="small"
            color={iconColor}
            classNames='Badge__icon'
        />)
        : null;

    return (
        <div className={classes}>
            {iconElement}
            <Translate tag={label} />
        </div>
    );
};

Badge.propTypes = {
    size: PropTypes.string,
    label: PropTypes.string.isRequired,
    type: PropTypes.string,
    icon: PropTypes.string,
};

export default Badge;