// Thin wrapper around lucide createIcons for React
// Usage: <Icon name="plus" className="icon" />
const Icon = ({ name, className = 'icon', size, strokeWidth, style }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      if (size) el.setAttribute('width', size), el.setAttribute('height', size);
      if (strokeWidth) el.setAttribute('stroke-width', strokeWidth);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { class: className } });
    }
  }, [name, className, size, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', ...style }} />;
};

window.Icon = Icon;