import { useI18n } from '../../../i18n';
import { FcrIconType } from '../../icon/type';
import { FrcTooltipButton } from '../../tooltips-button';
import './index.css';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var ParticipantButton = function ParticipantButton(_ref) {
  var onTooltipButtonClick = _ref.onTooltipButtonClick,
    userCount = _ref.userCount,
    tooltipContent = _ref.tooltipContent,
    _ref$showParticipantL = _ref.showParticipantListCounts,
    showParticipantListCounts = _ref$showParticipantL === void 0 ? true : _ref$showParticipantL;
  var transI18n = useI18n();
  return /*#__PURE__*/_jsxs("div", {
    className: "fcr-room-screen-share-state-bar-participants",
    children: [/*#__PURE__*/_jsx(FrcTooltipButton, {
      onTooltipButtonClick: onTooltipButtonClick,
      tooltip: {
        content: tooltipContent ? tooltipContent : transI18n('fmt_participants_label_participants'),
        icon: {
          type: FcrIconType.FCR_PEOPLE,
          size: 32,
          colors: {
            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
          }
        }
      },
      withPopover: false
    }), showParticipantListCounts && userCount ? /*#__PURE__*/_jsx("span", {
      className: "fcr-action-bar-participants-user-count",
      children: userCount
    }) : null]
  });
};