import React from 'react';
import PropTypes from 'prop-types';
import './styles/Bullet.scss';
import Icon, { allowedTypes as iconTypes } from '../icon/Icon';
import { createNamespace } from '../../tools/namingTools';

const n = createNamespace('Bullet');

const Bullet = ({
    content,
    tooltip,
    iconType
}) => {
    if (!content) {
        return null;
    }

    const modifiers = [iconType && 'with-icon'];

    return (
        <span {...n('wrapper', modifiers).withTestId().withE2EId().props}>
            {iconType && <Icon type={iconType} {...n('icon', iconType).withTestId().props} />}
            <span {...n('content').withTestId().props}>{content}</span>
            {tooltip && <span {...n('tooltip').withTestId().props}>{tooltip}</span>}
        </span>
    );
};

Bullet.propTypes = {
    content: PropTypes.string,
    tooltip: PropTypes.string,
    iconType: PropTypes.oneOf(iconTypes)
};

Bullet.defaultProps = {
    content: '',
    tooltip: '',
    iconType: null
};

export default Bullet;
