
import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import { i18nShape as compareProductI18nShape } from '../../../../constants/components/prop-types/comparable-products';
import { i18nMock as compareProductI18nMock } from '../../../../../mocks/comparableProducts/i18n';
import Badge from '../../../../atoms/badge/Badge';

import './styles/CompareProductCategories.scss';

const n = createNamespace('CompareProductCategories');

export const CompareProductCategories = ({ tags, i18n }) => {
    if (!tags || !tags.length) {
        return null;
    }

    return (
        <ul {...n('list').props} aria-label={i18n.categories}>
            {tags.map(tag => (
                <li key={tag} {...n('item').withTestId().props}>
                    <Badge className={n('badge').props.className} label={tag} />
                </li>
            ))}
        </ul>
    );
};

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

CompareProductCategories.propTypes = {
    tags: PropTypes.arrayOf(PropTypes.string),
    i18n: PropTypes.shape(compareProductI18nShape)
};

CompareProductCategories.defaultProps = {
    tags: null,
    i18n: compareProductI18nMock
};
