import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { noop } from 'lodash';

const DataCard = ({
  label,
  data,
  onClick,
  allowDrag
}) => {
  const classes = cx('data-card', {
    'data-card--can-drag': allowDrag,
    'data-card--can-click': onClick !== noop
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classes,
    onClick: onClick
  }, /*#__PURE__*/React.createElement("div", {
    className: "data-card__label"
  }, /*#__PURE__*/React.createElement("h2", null, label)), data && Object.keys(data).length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "data-card__data"
  }, Object.keys(data).map(dataLabel => /*#__PURE__*/React.createElement("div", {
    className: "data-card__data-item",
    key: dataLabel
  }, /*#__PURE__*/React.createElement("div", {
    className: "data-card__data-label"
  }, dataLabel), /*#__PURE__*/React.createElement("div", {
    className: "data-card__data-value"
  }, data[dataLabel])))));
};

DataCard.defaultProps = {
  data: {},
  onClick: noop,
  allowDrag: false
};
DataCard.propTypes = {
  data: PropTypes.object,
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  allowDrag: PropTypes.bool
};
export default DataCard;