import { useI18n } from '../../../i18n';
import { FcrButton } from '../../button';
import FcrDivider from '../../divider';
import { FcrIcon } from '../../icon';
import { FcrIconType } from '../../icon/type';
import { DragIcon } from './drag-icon';
import './index.css';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var ShareStateBar = function ShareStateBar() {
  var t = useI18n();
  return /*#__PURE__*/_jsxs("div", {
    className: "share-state-bar",
    children: [/*#__PURE__*/_jsx(DragIcon, {}), /*#__PURE__*/_jsx(FcrDivider, {
      type: "vertical"
    }), /*#__PURE__*/_jsxs("div", {
      className: "share-state-bar__state",
      children: [/*#__PURE__*/_jsx(FcrIcon, {
        type: FcrIconType.FCR_VIDEO_SHARESCREEN,
        size: 22,
        colors: {
          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
        }
      }), /*#__PURE__*/_jsx("div", {
        children: t('fmt_modules_labels_sharing')
      }), /*#__PURE__*/_jsx("div", {
        className: "share-state-bar__share_screen_preview"
      }), /*#__PURE__*/_jsx(FcrButton, {
        type: "primary",
        styleType: "danger",
        size: "XXS",
        shape: "rounded",
        children: /*#__PURE__*/_jsxs("div", {
          className: "share-state-bar__stop-share fcr-flex fcr-items-center fcr-justify-center",
          children: [/*#__PURE__*/_jsx(FcrIcon, {
            type: FcrIconType.FCR_RECORDING_STOP,
            size: 20,
            colors: {
              iconPrimary: 'var(--fcr_ui_scene_white10)'
            }
          }), t('fmt_screenshare_controlbar_button_stop')]
        })
      })]
    })]
  });
};