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 const ObfuscatableValue = _ref => {
  let {
    value,
    onObfuscationRequested = noop,
    editable = false
  } = _ref;
  return value ? ___EmotionJSX("div", {
    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