// Icon.jsx — thin Lucide line-icon wrapper
const { useEffect, useRef } = React;

function Icon({ name, size = 20, color, style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, "stroke-width": 1.6 },
        nameAttr: "data-lucide",
      });
    }
  }, [name, size]);
  return <span ref={ref} style={{ display: "inline-flex", color, ...style }} />;
}

window.Icon = Icon;