import React from 'react';
import styled from 'styled-components';
import { isFunction, isNumber } from '../../../../common/utils';
import { Flexbox, Icon, Button, Development } from '../../../..';
var getColor = function getColor(props) {
  var $color = props.$color,
    theme = props.theme;
  if (isFunction($color)) {
    return $color(theme);
  }
  return 'transparent';
};
var StyledCross = styled(Icon.Cross8).withConfig({
  displayName: "RoundedPill__StyledCross",
  componentId: "sc-rkjqq-0"
})(["opacity:0;margin-bottom:1px;transition:opacity 0.2s ease-in;"]);
var StyledDivRounded = styled.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 = styled.div.withConfig({
  displayName: "RoundedPill__Circle",
  componentId: "sc-rkjqq-2"
})(["border-radius:100%;height:8px;width:8px;background-color:", ";"], function (p) {
  return getColor(p);
});
export var RoundedPill = function RoundedPill(_ref2) {
  var className = _ref2.className,
    label = _ref2.label,
    color = _ref2.color,
    development = _ref2.development,
    onClose = _ref2.onClose;
  return React.createElement(StyledDivRounded, {
    className: className,
    $hasOnClose: isFunction(onClose)
  }, React.createElement(Button, {
    variant: "neutral",
    onClick: onClose
  }, React.createElement(Flexbox, {
    container: true,
    alignItems: "center",
    gap: 1
  }, color ? React.createElement(Flexbox, {
    item: true
  }, React.createElement(Circle, {
    $color: color
  })) : null, label ? React.createElement(Flexbox, {
    item: true
  }, label) : null, isNumber(development) ? React.createElement(Flexbox, {
    item: true
  }, React.createElement(Development, {
    value: development,
    percentage: true,
    decimals: 2
  })) : null, isFunction(onClose) ? React.createElement(Flexbox, {
    item: true
  }, React.createElement(StyledCross, null)) : null)));
};