/* Lucide icon component — renders an SVG inline for each name.
   Uses the global window.lucide UMD. */
const { useRef, useLayoutEffect } = React;

function Icon({ name, size = 16, className = '', strokeWidth = 2 }) {
  const ref = useRef(null);
  useLayoutEffect(() => {
    const el = ref.current;
    if (!el || !window.lucide) return;
    const lib = window.lucide;
    const key = name;
    const def = (lib.icons && (lib.icons[key] || lib.icons[key?.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()])) || lib.icons.Circle;
    const svg = lib.createElement(def);
    svg.setAttribute('width', String(size));
    svg.setAttribute('height', String(size));
    svg.setAttribute('stroke-width', String(strokeWidth));
    svg.setAttribute('class', className);
    el.replaceChildren(svg);
  }, [name, size, className, strokeWidth]);
  return <span ref={ref} className="inline-flex shrink-0" style={{ width: size, height: size }} />;
}

window.Icon = Icon;