
import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import Badge from '../../../../atoms/badge/Badge';

import './styles/CompareProductCategories.scss';

const n = createNamespace('CompareProductCategories');

export const CompareProductCategories = ({ tags }) => (
    <React.Fragment>
        {tags && tags.length ? tags.map(tag => (
            <span key={tag} {...n('item').withTestId().props}>
                <Badge label={tag} />
            </span>
        )) : ''}
    </React.Fragment>
);

CompareProductCategories.isRenderable = item => item.tags && item.tags.length;

CompareProductCategories.propTypes = {
    tags: PropTypes.arrayOf(PropTypes.string)
};

CompareProductCategories.defaultProps = {
    tags: null
};
