
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 './styles/CompareProductEditions.scss';

const n = createNamespace('CompareProductEditions');

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

    return (
        <ul {...n('list').withTestId().props} aria-label={i18n.editions}>
            {editionNames.map(editionName => <li {...n('item').withTestId().props} key={editionName}>{editionName}</li>)}
        </ul>
    );
};

CompareProductEditions.isRenderable = item => item.editionNames && item.editionNames.length;

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

CompareProductEditions.defaultProps = {
    editionNames: null,
    i18n: compareProductI18nMock
};
