/* Ginja.Ai — Lucide icon helper (loaded from CDN in index.html).
   Renders a Lucide icon by name at the brand's 2px stroke. Inherits currentColor. */
function Icon({ name, size = 16, strokeWidth = 2, style = {}, className = "" }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const host = ref.current;
    if (!host || !window.lucide) return;
    host.innerHTML = "";
    const i = document.createElement("i");
    i.setAttribute("data-lucide", name);
    host.appendChild(i);
    window.lucide.createIcons({
      attrs: { width: size, height: size, "stroke-width": strokeWidth },
      nameAttr: "data-lucide",
    });
  }, [name, size, strokeWidth]);
  return (
    <span
      ref={ref}
      className={className}
      style={{ display: "inline-flex", width: size, height: size, flex: "none", ...style }}
    />
  );
}

window.Icon = Icon;