// Lucide icon helper — fine 1.5px strokes to match the brand's clean lines.
// Lucide is the chosen icon system (closest CDN match; flagged in README).
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.6, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { 'stroke-width': strokeWidth, width: size, height: size },
        nameAttr: 'data-lucide',
      });
    }
  }, [name, size, strokeWidth]);
  return <span ref={ref} aria-hidden="true" style={{ display: 'inline-flex', color, width: size, height: size, ...style }} />;
}
window.Icon = Icon;