/* 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;
    el.innerHTML = `<i data-lucide="${name}"></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;