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

const n = createNamespace('CompareProductHeader');

export const CompareProductHeader = ({
    label,
    nItems,
    i18n
}) => (
    <div {...n('wrapper').props}>
        <h1 {...n('title').props}>{label}</h1>
        <span {...n('total').props}>{i18n.nbselected.replace('{0}', nItems).replace('{1}', 4)}</span>
    </div>
);

CompareProductHeader.propTypes = {
    label: PropTypes.string,
    nItems: PropTypes.number,
    i18n: PropTypes.shape({
        compareApplications: PropTypes.string,
        description: PropTypes.string,
        nbselected: PropTypes.string,
        showDifferences: PropTypes.string
    }).isRequired
};

CompareProductHeader.defaultProps = {
    label: null,
    nItems: 0
};
