// Lightweight Lucide wrapper — renders SVGs via lucide UMD with sensible defaults.
const Icon = ({ name, size = 18, className = "", strokeWidth = 1.5, style = {} }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    ref.current.innerHTML = "";
    const svg = window.lucide.createElement(window.lucide.icons[
      // Convert kebab to PascalCase used by lucide.icons
      name
        .split("-")
        .map(s => s[0].toUpperCase() + s.slice(1))
        .join("")
    ]);
    if (svg) {
      svg.setAttribute("width", size);
      svg.setAttribute("height", size);
      svg.setAttribute("stroke-width", strokeWidth);
      ref.current.appendChild(svg);
    }
  }, [name, size, strokeWidth]);
  return <span ref={ref} className={"inline-flex items-center justify-center " + className} style={style} aria-hidden="true" />;
};

window.Icon = Icon;