import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { useIntl } from 'react-intl';
import { IconType } from '../../../../../constants';
import { messages } from '../../../../../messages';
import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
import { BaseBadgeElement } from '../common';
const AppliedToComponentsCountElement = props => {
  const {
    formatMessage
  } = useIntl();
  const context = useFlexibleUiContext();
  if (
  // Check for null and undefined, render if it's 0.
  (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === null || (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === undefined) {
    return null;
  }
  const label = formatMessage(messages.compass_applied_components_count, {
    numberOfComponents: context.appliedToComponentsCount
  });
  return /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
    icon: IconType.Component,
    label: label
  }, props));
};
export default AppliedToComponentsCountElement;