// helpers.jsx — shared primitives. Exported to window; consumers read from window.
const { useEffect: _useEffect, useState: _useState } = React;

// Render Lucide's icon data through React so Lucide does not replace React-owned DOM nodes.
function Icon({ name, size = 18, style = {}, strokeWidth = 2.25 }) {
  const iconName = name.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('');
  const icon = window.lucide?.icons?.[iconName];

  if (!icon) {
    return <span style={{ width: size, height: size, display: 'inline-flex', ...style }}></span>;
  }

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      style={{ width: size, height: size, display: 'inline-flex', ...style }}
    >
      {icon.map(([tag, attrs], index) => React.createElement(tag, { ...attrs, key: attrs.key || index }))}
    </svg>
  );
}

function Avatar({ s, className = '' }) {
  return <div className={'avatar ' + className} style={{ background: s.avatar_color || s.av }}>{s.initials}</div>;
}

// activity tag pill (outlined, colored). `compact` hides the code line.
function ActivityTag({ a }) {
  if (!a) return null;
  return (
    <span className="atag" style={{ borderColor: a.color, color: a.color }}>
      <span className="sw" style={{ background: a.color }}></span>
      {a.short_name || a.short || a.name}
    </span>
  );
}

// ticking "now" — re-renders every `ms`
function useNow(ms = 1000) {
  const [now, setNow] = _useState(Date.now());
  _useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), ms);
    return () => clearInterval(t);
  }, [ms]);
  return now;
}

Object.assign(window, { Icon, Avatar, ActivityTag, useNow });