import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
import { noop } from "../../utils";
import { jsx as ___EmotionJSX } from "@emotion/react";

/**
 * Component displaying a value and a cross when editable props is set to true
 * Consumer is notified thanks to obfuscate property that the value displayed must be obfuscated
 */
export var ObfuscatableValue = function ObfuscatableValue(_ref) {
  var value = _ref.value,
      _ref$onObfuscationReq = _ref.onObfuscationRequested,
      onObfuscationRequested = _ref$onObfuscationReq === void 0 ? noop : _ref$onObfuscationReq,
      _ref$editable = _ref.editable,
      editable = _ref$editable === void 0 ? false : _ref$editable;
  return value ? ___EmotionJSX("div", {
    onClick: function onClick() {
      if (editable) {
        onObfuscationRequested();
      }
    },
    style: {
      display: "inline-block"
    }
  }, value, " ", editable && ___EmotionJSX(FontAwesomeIcon, {
    title: "Obfuscate value",
    icon: faTimes,
    style: {
      color: "red",
      cursor: "pointer"
    }
  })) : null;
};
//# sourceMappingURL=ObfuscatableValue.js.map