import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["children", "className", "size", "as"];
import React, { useContext } from 'react';
import { forwardRefAndName } from "../../../lib/forwardRefAndName";
import { useResponsiveLayout } from "../../../components/ResponsiveLayout";
import { cx } from "../../../lib/theming/Emotion";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { styles } from "../MenuMessage.styles";
export var MenuMessageDataTids = {
  root: 'MenuMessage__root'
};
export var MenuMessage = forwardRefAndName('MenuMessage', function (_ref, ref) {
  var _cx;
  var children = _ref.children,
    className = _ref.className,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'small' : _ref$size,
    _ref$as = _ref.as,
    Tag = _ref$as === void 0 ? 'p' : _ref$as,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useResponsiveLayout = useResponsiveLayout(),
    isMobile = _useResponsiveLayout.isMobile;
  var theme = useContext(ThemeContext);
  var getMenuMessageSizeClassName = function getMenuMessageSizeClassName() {
    switch (size) {
      case 'large':
        return cx(styles.rootLarge(theme));
      case 'medium':
        return cx(styles.rootMedium(theme));
      case 'small':
      default:
        return cx(styles.rootSmall(theme));
    }
  };
  return /*#__PURE__*/(
    React.createElement(Tag, _extends({
      ref: ref,
      "data-tid": MenuMessageDataTids.root,
      className: cx(getMenuMessageSizeClassName(), (_cx = {}, _cx[styles.root(theme)] = true, _cx[styles.rootMobile(theme)] = isMobile, _cx), className)
    }, rest), children)
  );
});