/* Lucide icon helper — React-safe (same pattern as the DS landing kit). */
(function () {
  function toPascal(name) {
    return String(name).split(/[-_]/).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join('');
  }

  function Icon({ name, size = 22, color = 'currentColor', strokeWidth = 2, style }) {
    const ref = React.useRef(null);
    React.useEffect(() => {
      const el = ref.current;
      if (!el || !window.lucide || !window.lucide.icons) return;
      const node = window.lucide.icons[toPascal(name)];
      el.innerHTML = '';
      if (!node) return;
      let svg;
      try {
        svg = window.lucide.createElement(node);
      } catch (e) { return; }
      svg.setAttribute('width', size);
      svg.setAttribute('height', size);
      svg.setAttribute('stroke', color);
      svg.setAttribute('stroke-width', strokeWidth);
      svg.style.display = 'block';
      el.appendChild(svg);
    }, [name, size, color, strokeWidth]);
    return <span ref={ref} className="lc-ico" style={{ display: 'inline-flex', width: size, height: size, color, flex: 'none', ...style }} />;
  }

  window.ABIcons = { Icon };
})();