import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className", "color", "count", "maxCount", "size", "borderColor", "borderTint"];
import React from 'react';
import Box from '../box';
import cx from 'classnames';
import theme from './theme.css';
import uiUtilities from '@teamleader/ui-utilities';
import Monospaced from '../typography/Monospaced';

var Counter = function Counter(_ref) {
  var _cx;

  var children = _ref.children,
      className = _ref.className,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'neutral' : _ref$color,
      count = _ref.count,
      maxCount = _ref.maxCount,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      borderColor = _ref.borderColor,
      borderTint = _ref.borderTint,
      others = _objectWithoutProperties(_ref, _excluded);

  var classNames = cx(uiUtilities['reset-font-smoothing'], theme['counter'], theme[color], theme[size], (_cx = {}, _defineProperty(_cx, theme["border-".concat(borderColor, "-").concat(borderTint)], borderColor && borderTint), _defineProperty(_cx, theme["border-".concat(borderColor)], borderColor && !borderTint), _cx), className);
  return /*#__PURE__*/React.createElement(Box, _extends({
    className: classNames,
    element: "span"
  }, others, {
    "data-teamleader-ui": "counter"
  }), /*#__PURE__*/React.createElement(Monospaced, null, count > maxCount ? "".concat(maxCount, "+") : count), " ", children);
};

export default Counter;