import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

var HeaderDetails = function HeaderDetails(_ref) {
  var items = _ref.items,
      spaceBelow = _ref.spaceBelow;
  var itemList = items.map(function (item, ind) {
    if (item.isVisible !== undefined && !item.isVisible) {
      return null;
    }

    return [React.createElement("div", {
      key: "label-".concat(item.label),
      className: classNames({
        'sidenav__details__title': true,
        'muted': true,
        'flush--bottom': true,
        'push--top': ind > 0
      })
    }, React.createElement("h5", null, item.label)), React.createElement("span", {
      key: "value-".concat(item.label),
      className: "sidenav__details__item"
    }, item.value)];
  });
  return React.createElement("div", {
    className: classNames({
      sidenav__details: true,
      'soft-double--bottom': spaceBelow
    })
  }, itemList);
};

HeaderDetails.propTypes = {
  /** List of details to display */
  items: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string.isRequired,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired
  })).isRequired,

  /** Whether or not the details have extra space below */
  spaceBelow: PropTypes.bool
};
HeaderDetails.defaultProps = {
  spaceBelow: false
};
export default HeaderDetails;