// React-owned Lucide icon.
//
// Previously icons were authored as <i data-lucide="name"> and converted in
// bulk by lucide.createIcons(), which REPLACES each <i> with a fresh <svg>
// node outside of React's knowledge. When React later unmounts a branch that
// held such an icon (e.g. toggling the "Add spouse / partner" block), it tries
// to removeChild the original <i> — which no longer exists — and the whole app
// crashes with "NotFoundError: Failed to execute 'removeChild'".
//
// This component builds the SVG through React from lucide's icon data, so React
// fully owns the node and there is no out-of-band DOM mutation. Drop-in usage:
//   <Icon name="user-plus" style={{ width: 18, height: 18 }} />
(function () {
  const cache = {};

  function toPascal(name) {
    return String(name)
      .split('-')
      .map((p) => (p ? p[0].toUpperCase() + p.slice(1) : p))
      .join('');
  }

  function camelKey(k) {
    return k.indexOf('-') === -1
      ? k
      : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
  }

  function attrsToReact(attrs) {
    const out = {};
    for (const k in attrs) out[camelKey(k)] = attrs[k];
    return out;
  }

  function getNode(name) {
    if (cache[name]) return cache[name];
    const icons = window.lucide && window.lucide.icons;
    const node = icons ? icons[toPascal(name)] : null;
    if (node) cache[name] = node;
    return node || null;
  }

  function Icon({ name, size, style, className, tip, tabIndex, ...rest }) {
    const w = (style && style.width) || size || 24;
    const h = (style && style.height) || size || 24;
    const node = getNode(name);

    const svgProps = {
      xmlns: 'http://www.w3.org/2000/svg',
      width: w,
      height: h,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      className,
      style,
      tabIndex,
      ...rest,
    };
    if (tip != null) svgProps['data-tip'] = tip;

    const children = node
      ? node.map(([tag, attrs], i) =>
          React.createElement(tag, { key: i, ...attrsToReact(attrs) }))
      : null;

    return React.createElement('svg', svgProps, children);
  }

  window.Icon = Icon;
})();