/* Icon — thin wrapper over Lucide (substitutes for the licensed Untitled UI
   set, per the CROPR design system). Renders into a span we own so React
   never diffs the SVG. Stroke 1.75, currentColor, 20-24px in UI. */
function Icon({ name, size = 20, stroke = 1.75, color = "currentColor", style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || !window.lucide) return;
    // Safelist the name (lucide icons are lowercase kebab-case). Icon names can
    // come from admin-editable data (e.g. workflow-stage icons), so this closes
    // any HTML-injection path through innerHTML — belt-and-suspenders XSS defense.
    const safe = String(name || "").toLowerCase().replace(/[^a-z0-9-]/g, "");
    el.innerHTML = `<i data-lucide="${safe}"></i>`;
    window.lucide.createIcons({
      attrs: { width: size, height: size, "stroke-width": stroke, stroke: color },
      nameAttr: "data-lucide",
    });
  }, [name, size, stroke, color]);
  return <span ref={ref} style={{ display: "inline-flex", width: size, height: size, ...style }} />;
}
window.Icon = Icon;