"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RoundedPill = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _utils = require("../../../../common/utils");
var _ = require("../../../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getColor = function getColor(props) {
  var $color = props.$color,
    theme = props.theme;
  if ((0, _utils.isFunction)($color)) {
    return $color(theme);
  }
  return 'transparent';
};
var StyledCross = (0, _styledComponents.default)(_.Icon.Cross8).withConfig({
  displayName: "RoundedPill__StyledCross",
  componentId: "sc-rkjqq-0"
})(["opacity:0;margin-bottom:1px;transition:opacity 0.2s ease-in;"]);
var StyledDivRounded = _styledComponents.default.div.withConfig({
  displayName: "RoundedPill__StyledDivRounded",
  componentId: "sc-rkjqq-1"
})(["display:inline-block;box-sizing:border-box;background:", ";border-radius:100px;padding:2px ", "px;&:hover ", "{opacity:1;}"], function (_ref) {
  var theme = _ref.theme;
  return theme.color.pillBackground;
}, function (p) {
  return p.theme.spacing.unit(3);
}, StyledCross);
var Circle = _styledComponents.default.div.withConfig({
  displayName: "RoundedPill__Circle",
  componentId: "sc-rkjqq-2"
})(["border-radius:100%;height:8px;width:8px;background-color:", ";"], function (p) {
  return getColor(p);
});
var RoundedPill = exports.RoundedPill = function RoundedPill(_ref2) {
  var className = _ref2.className,
    label = _ref2.label,
    color = _ref2.color,
    development = _ref2.development,
    onClose = _ref2.onClose;
  return _react.default.createElement(StyledDivRounded, {
    className: className,
    $hasOnClose: (0, _utils.isFunction)(onClose)
  }, _react.default.createElement(_.Button, {
    variant: "neutral",
    onClick: onClose
  }, _react.default.createElement(_.Flexbox, {
    container: true,
    alignItems: "center",
    gap: 1
  }, color ? _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(Circle, {
    $color: color
  })) : null, label ? _react.default.createElement(_.Flexbox, {
    item: true
  }, label) : null, (0, _utils.isNumber)(development) ? _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Development, {
    value: development,
    percentage: true,
    decimals: 2
  })) : null, (0, _utils.isFunction)(onClose) ? _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(StyledCross, null)) : null)));
};