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

const n = createNamespace('CompareProductFeatures');

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

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

CompareProductFeatures.isRenderable = item => item.features && item.features.length;

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

CompareProductFeatures.defaultProps = {
    features: null,
    i18n: compareProductI18nMock
};
