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

import './styles/CompareProductFeatures.scss';

const n = createNamespace('CompareProductFeatures');

export const CompareProductFeatures = ({ features }) => (
    <React.Fragment>
        {features && features.length ? (
            <ul {...n('list').withTestId().props}>
                {features.map(feature => <li key={feature}>{feature}</li>)}
            </ul>
        ) : ''}
    </React.Fragment>
);

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

CompareProductFeatures.propTypes = {
    features: PropTypes.arrayOf(PropTypes.string)
};

CompareProductFeatures.defaultProps = {
    features: null
};
