// Tooltip — Vendoo Design System  (Tooltip)
// ─────────────────────────────────────────────────────────────────────────────
// The REAL component body, lifted VERBATIM from the design-system source
//   tooltip/Tooltip.jsx
// The published _ds_bundle.js predates this component and does not export it, so
// — exactly like BottomSheet.jsx / SideSheet.jsx / UploadProgress.jsx — this file
// registers the export on window.VendooDesignSystem_a81b7b instead of a top-level
// ESM `export` (the in-browser Babel transform rejects `export`). The playground
// renders this straight from the namespace; nothing is reimplemented.
//
// A plain tooltip: a brief text label on an inverse (dark) surface that floats
// beside the element it describes, with a small beak pointing toward it. Mapped
// from Figma "Tooltip" plain-tooltip variant set:
//   Type {Single line · Multi line} × Position {top · bottom · left · right}.
// Built on tokens.css (inverse-surface family). React is global.
// ─────────────────────────────────────────────────────────────────────────────
(function () {
  const React = window.React;
  const ns = (window.VendooDesignSystem_a81b7b = window.VendooDesignSystem_a81b7b || {});

  const VDS_TOOLTIP_CSS = `
.vds-tooltip{
  position:relative; box-sizing:border-box;
  display:inline-flex; align-items:center;
  min-height:24px; max-width:220px;
  padding:4px 8px;
  background:var(--sys-inverse-surface);
  border-radius:var(--radius-xs);
  font:var(--type-body-small);
  letter-spacing:var(--type-body-small-letter-spacing);
  color:var(--sys-inverse-on-surface);
}
.vds-tooltip--singleline{ white-space:nowrap; max-width:none; }
.vds-tooltip--multiline{ white-space:normal; text-wrap:pretty; }

.vds-tooltip__text{ flex:0 1 auto; }

/* ── Beak (16×8 triangle, same fill as the container) ── */
.vds-tooltip__beak{ position:absolute; width:0; height:0; }
.vds-tooltip--bottom .vds-tooltip__beak{
  bottom:-8px; left:50%; transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-top:8px solid var(--sys-inverse-surface);
}
.vds-tooltip--top .vds-tooltip__beak{
  top:-8px; left:50%; transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:8px solid var(--sys-inverse-surface);
}
.vds-tooltip--left .vds-tooltip__beak{
  left:-8px; top:50%; transform:translateY(-50%);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-right:8px solid var(--sys-inverse-surface);
}
.vds-tooltip--right .vds-tooltip__beak{
  right:-8px; top:50%; transform:translateY(-50%);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-left:8px solid var(--sys-inverse-surface);
}
`;

  function vdsInjectCss(id, css) {
    if (typeof document === "undefined" || document.getElementById(id)) return;
    const s = document.createElement("style"); s.id = id; s.textContent = css; document.head.appendChild(s);
  }

  function Tooltip({
    text = "Start taking photos to create your listing",
    position = "bottom",
    multiline = false,
  } = {}) {
    vdsInjectCss("vds-tooltip-css", VDS_TOOLTIP_CSS);

    const pos = ["top", "bottom", "left", "right"].includes(position) ? position : "bottom";
    const cls = [
      "vds-tooltip",
      `vds-tooltip--${pos}`,
      multiline ? "vds-tooltip--multiline" : "vds-tooltip--singleline",
    ].join(" ");

    return (
      <div className={cls} role="tooltip">
        <span className="vds-tooltip__text">{text}</span>
        <span className="vds-tooltip__beak" aria-hidden="true"></span>
      </div>
    );
  }

  ns.Tooltip = Tooltip;
})();