import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "className", "color", "size"];
import cx from 'classnames';
import React, { forwardRef } from 'react';
import { UITextBody, UITextSmall } from '../typography';
import theme from './theme.css';
var StatusLabel = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
      className = _ref.className,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'neutral' : _ref$color,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      others = _objectWithoutProperties(_ref, _excluded);

  var classNames = cx(theme['label'], theme[size], className);
  var Element = size === 'small' ? UITextSmall : UITextBody;
  return /*#__PURE__*/React.createElement(Element, _extends({
    element: "span"
  }, others, {
    alignItems: "center",
    backgroundColor: color,
    backgroundTint: color === 'neutral' ? 'light' : 'lightest',
    borderColor: color,
    borderTint: color === 'neutral' ? 'dark' : 'light',
    borderWidth: 1,
    className: classNames,
    color: color === 'neutral' ? 'teal' : color,
    tint: color === 'neutral' ? 'dark' : 'darkest',
    "data-teamleader-ui": "status-label",
    display: "inline-flex",
    paddingHorizontal: 2,
    ref: ref
  }), /*#__PURE__*/React.createElement("span", {
    className: theme['inner']
  }, children));
});
StatusLabel.displayName = 'StatusLabel';
export default StatusLabel;