// Icon.jsx — Lucide icons via CDN
function Icon({ name, size = 20, style, color }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const svg = lucide.createElement(lucide[toPascalCase(name)]);
      if (svg) {
        svg.setAttribute('width', size);
        svg.setAttribute('height', size);
        svg.setAttribute('stroke-width', size >= 32 ? '1.5' : '2');
        if (color) svg.setAttribute('stroke', color);
        ref.current.appendChild(svg);
      }
    }
  }, [name, size, color]);
  return <span ref={ref} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...style }} />;
}

function toPascalCase(str) {
  return str.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
}

window.Icon = Icon;