import React from "react";

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

ensureStyle("at-hint", `
  .at-hint{display:flex;align-items:flex-start;gap:6px;font-family:var(--font-sans);font-size:11px;line-height:15px;color:var(--fg-4)}
  .at-hint svg{width:13px;height:13px;flex:0 0 13px;margin-top:1px}
  .at-hint--warn{color:var(--at-warning-fg)}
  .at-hint--error{color:var(--at-flush-700)}
`);

/**
 * Stand-alone helper text for drawer sections and compact flow notes.
 */
export function Hint({ tone = "neutral", icon = null, children }) {
  const cls = ["at-hint", tone === "warn" ? "at-hint--warn" : "", tone === "error" ? "at-hint--error" : ""].filter(Boolean).join(" ");
  return (
    <span className={cls}>
      {icon}
      <span>{children}</span>
    </span>
  );
}