import * as React from "react";
import { css } from "emotion";
import { ElementRoot } from "../../../../render/components/ElementRoot";
import ConnectedElement from "../../../components/ConnectedElement";
import { UserOutlined } from '@fishx/icons';
var center = /*#__PURE__*/css({
  textAlign: "center"
}, "label:center;");

var Icon = function Icon(_ref) {
  var element = _ref.element;
  return /*#__PURE__*/React.createElement(ElementRoot, {
    element: element
  }, function (_ref2) {
    var getAllClasses = _ref2.getAllClasses,
        elementStyle = _ref2.elementStyle;
    return /*#__PURE__*/React.createElement(ConnectedElement, {
      elementId: element.id
    }, function (element) {
      var _element$data$compone = element.data.componentSettings,
          icon = _element$data$compone.icon,
          _element$data$compone2 = _element$data$compone.width,
          width = _element$data$compone2 === void 0 ? 50 : _element$data$compone2,
          color = _element$data$compone.color;
      var widthClass = /*#__PURE__*/css({
        fontSize: width,
        color: color
      }, "label:widthClass;");
      var className = getAllClasses("webiny-pb-base-page-element-style webiny-pb-page-element-icon", center, widthClass);

      if (!icon) {
        return null;
      }

      return /*#__PURE__*/React.createElement("span", {
        style: elementStyle,
        className: className
      }, icon.type ? icon : /*#__PURE__*/React.createElement(UserOutlined, null));
    });
  });
};

export default Icon;
//# sourceMappingURL=Icon.js.map