import { jsxs as r, jsx as t } from "react/jsx-runtime";
import { useRef as f, useEffect as h } from "react";
import o from "../../../../modules/ComparisonV2/comparisonV2.module.css";
import { cn as E } from "../../../../utils/cn/cn.es.js";
import { Typography as l } from "../../../../components/Typography/Typography.es.js";
import { Icon as n } from "../../../../components/Icon/Icon.es.js";
import { EIconName as a } from "../../../../components/Icon/constants.es.js";
const R = ({
  title: c,
  description: p,
  onClose: e,
  isOpening: d,
  isClosing: u
}) => {
  const i = f(null);
  return h(() => {
    const s = (m) => {
      m.stopPropagation(), i.current && !i.current.contains(m.target) && e();
    };
    return document.addEventListener("mousedown", s), () => {
      document.removeEventListener("mousedown", s);
    };
  }, [e]), /* @__PURE__ */ r(
    "div",
    {
      className: E(o.tooltip, d && o.tooltipOpening, u && o.tooltipClosing),
      ref: i,
      children: [
        /* @__PURE__ */ r("div", { className: o.tooltipHeader, children: [
          /* @__PURE__ */ t(
            l,
            {
              as: "h4",
              defaultVariant: "headingSm",
              mobileVariant: "headingXs",
              className: o.tooltipTitle,
              children: c
            }
          ),
          /* @__PURE__ */ r("button", { className: o.closeButtonWrapper, onClick: e, children: [
            /* @__PURE__ */ t(n, { name: a.BRACKET_LEFT }),
            /* @__PURE__ */ t(n, { className: o.closeIcon, name: a.CLOSE_BOLD }),
            /* @__PURE__ */ t(n, { name: a.BRACKET_RIGHT })
          ] })
        ] }),
        /* @__PURE__ */ t(l, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: o.tooltipDescription, children: p })
      ]
    }
  );
};
export {
  R as ComparisonV2Tooltip
};
