// Icon — renders a Lucide icon inside React. Color via currentColor (set `color`/CSS).
function Icon({ name, size = 22, stroke = 2, color, style, className }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || !window.lucide) return;
    el.innerHTML = '';
    const i = document.createElement('i');
    i.setAttribute('data-lucide', name);
    i.setAttribute('width', size);
    i.setAttribute('height', size);
    i.setAttribute('stroke-width', stroke);
    el.appendChild(i);
    try { window.lucide.createIcons({ root: el }); }
    catch (e) { window.lucide.createIcons(); }
  }, [name, size, stroke]);
  return (
    <span ref={ref} className={'ic ' + (className || '')}
      style={{ color, width: size, height: size, ...style }} />
  );
}

window.Icon = Icon;