import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className", "onRemoveClick", "size"];
import { IconCloseSmallOutline } from '@teamleader/ui-icons';
import cx from 'classnames';
import React from 'react';
import Box from '../box';
import IconButton from '../iconButton';
import { UITextBody, UITextDisplay, UITextSmall } from '../typography';
import theme from './theme.css';

var Tag = function Tag(_ref) {
  var children = _ref.children,
      className = _ref.className,
      onRemoveClick = _ref.onRemoveClick,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      others = _objectWithoutProperties(_ref, _excluded);

  var classNames = cx(theme["is-".concat(size)], theme['wrapper'], className);
  var TextElement = size === 'small' ? UITextSmall : size === 'large' ? UITextDisplay : UITextBody;
  return /*#__PURE__*/React.createElement(Box, _extends({}, others, {
    className: classNames,
    "data-teamleader-ui": "tag",
    display: "inline-flex"
  }), /*#__PURE__*/React.createElement(TextElement, {
    color: "teal",
    marginLeft: size === 'small' ? 2 : 3,
    marginRight: onRemoveClick ? 1 : size === 'small' ? 2 : 3,
    marginVertical: size === 'small' ? 0 : 1,
    maxLines: 1,
    tint: "darkest"
  }, children), onRemoveClick && /*#__PURE__*/React.createElement(IconButton, {
    className: theme['remove-button'],
    flexShrink: 0,
    icon: /*#__PURE__*/React.createElement(IconCloseSmallOutline, null),
    onClick: onRemoveClick
  }));
};

export default Tag;