/* Icon — renders a Lucide icon (loaded from CDN in index.html).
   Lucide's createIcons() replaces the <i> placeholder with an <svg>,
   preserving the class so we can size/color via CSS. */
function Icon({ name, className = "", style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      // Replace just this placeholder if it hasn't been swapped yet
      if (ref.current.tagName.toLowerCase() === "i") {
        window.lucide.createIcons({ nameAttr: "data-lucide" });
      }
    }
  });
  return <i ref={ref} data-lucide={name} className={className} style={style}></i>;
}

window.Icon = Icon;