// dash-icons.jsx — custom duotone icon set for the dashboard (matches the glass / Kick-green brand)
// Two layers of currentColor (soft fill + crisp glyph) so each icon tints with its context.
const DI = {
  grid: (
    <React.Fragment>
      <rect x="3" y="3" width="8" height="8" rx="2.4" fill="currentColor" />
      <rect x="13" y="3" width="8" height="8" rx="2.4" fill="currentColor" fillOpacity="0.3" />
      <rect x="3" y="13" width="8" height="8" rx="2.4" fill="currentColor" fillOpacity="0.3" />
      <rect x="13" y="13" width="8" height="8" rx="2.4" fill="currentColor" fillOpacity="0.3" />
    </React.Fragment>
  ),
  signal: (
    <React.Fragment>
      <rect x="3.3" y="13" width="3" height="7" rx="1.5" fill="currentColor" fillOpacity="0.3" />
      <rect x="8.4" y="9" width="3" height="11" rx="1.5" fill="currentColor" fillOpacity="0.3" />
      <rect x="13.5" y="5.5" width="3" height="14.5" rx="1.5" fill="currentColor" />
      <rect x="18.6" y="3" width="3" height="17" rx="1.5" fill="currentColor" />
    </React.Fragment>
  ),
  chat: (
    <React.Fragment>
      <rect x="3.2" y="4" width="17.6" height="13" rx="3.6" fill="currentColor" fillOpacity="0.25" />
      <path d="M8 15.5 L8 20 L13.5 15.5 Z" fill="currentColor" fillOpacity="0.25" />
      <circle cx="9" cy="10.5" r="1.35" fill="currentColor" />
      <circle cx="13" cy="10.5" r="1.35" fill="currentColor" />
      <circle cx="17" cy="10.5" r="1.35" fill="currentColor" fillOpacity="0.5" />
    </React.Fragment>
  ),
  message: (
    <React.Fragment>
      <rect x="3.2" y="4" width="17.6" height="13" rx="3.6" fill="currentColor" fillOpacity="0.25" />
      <path d="M8 15.5 L8 20 L13.5 15.5 Z" fill="currentColor" fillOpacity="0.25" />
      <circle cx="9" cy="10.5" r="1.35" fill="currentColor" />
      <circle cx="13" cy="10.5" r="1.35" fill="currentColor" />
      <circle cx="17" cy="10.5" r="1.35" fill="currentColor" fillOpacity="0.5" />
    </React.Fragment>
  ),
  spark: (
    <React.Fragment>
      <path d="M13.5 3c.45 3.2 1.2 3.95 4.4 4.4-3.2.45-3.95 1.2-4.4 4.4-.45-3.2-1.2-3.95-4.4-4.4 3.2-.45 3.95-1.2 4.4-4.4Z" fill="currentColor" />
      <path d="M7.5 12.5c.28 2.1.66 2.48 2.76 2.76-2.1.28-2.48.66-2.76 2.76-.28-2.1-.66-2.48-2.76-2.76 2.1-.28 2.48-.66 2.76-2.76Z" fill="currentColor" fillOpacity="0.55" />
    </React.Fragment>
  ),
  poll: (
    <React.Fragment>
      <rect x="3.4" y="5" width="13" height="3.3" rx="1.65" fill="currentColor" />
      <rect x="3.4" y="10.35" width="17.2" height="3.3" rx="1.65" fill="currentColor" fillOpacity="0.5" />
      <rect x="3.4" y="15.7" width="9" height="3.3" rx="1.65" fill="currentColor" fillOpacity="0.3" />
    </React.Fragment>
  ),
  users: (
    <React.Fragment>
      <circle cx="9.5" cy="8" r="3.4" fill="currentColor" />
      <path d="M3.4 19.5c0-3.4 2.7-5.8 6.1-5.8s6.1 2.4 6.1 5.8Z" fill="currentColor" />
      <path d="M18.4 5.2v4.4M16.2 7.4h4.4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeOpacity="0.55" />
    </React.Fragment>
  ),
  scissors: (
    <React.Fragment>
      <rect x="3.3" y="5" width="17.4" height="14" rx="3" fill="currentColor" fillOpacity="0.25" />
      <circle cx="6.6" cy="8" r="0.95" fill="currentColor" fillOpacity="0.5" />
      <circle cx="6.6" cy="16" r="0.95" fill="currentColor" fillOpacity="0.5" />
      <path d="M10.6 9.4 L15.8 12 L10.6 14.6 Z" fill="currentColor" />
    </React.Fragment>
  ),
  card: (
    <React.Fragment>
      <rect x="3" y="5.5" width="18" height="13" rx="2.8" fill="currentColor" fillOpacity="0.25" />
      <rect x="3" y="8.6" width="18" height="2.8" fill="currentColor" />
      <rect x="6" y="14" width="5" height="2" rx="1" fill="currentColor" fillOpacity="0.6" />
    </React.Fragment>
  ),
  gauge: (
    <React.Fragment>
      <path d="M4 17a8 8 0 1 1 16 0Z" fill="currentColor" fillOpacity="0.2" />
      <path d="M4 17a8 8 0 1 1 16 0" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none" />
      <path d="M12 17 L16.2 11.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
      <circle cx="12" cy="17" r="1.9" fill="currentColor" />
    </React.Fragment>
  ),
  refresh: (
    <React.Fragment>
      <circle cx="12" cy="12" r="7.4" fill="currentColor" fillOpacity="0.18" />
      <path d="M18.5 12a6.5 6.5 0 1 1-1.9-4.6" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" fill="none" />
      <path d="M18.8 4.6 L18.8 8.2 L15.2 8.2 Z" fill="currentColor" />
    </React.Fragment>
  ),
  zap: (
    <React.Fragment>
      <rect x="3" y="3" width="18" height="18" rx="5" fill="currentColor" fillOpacity="0.18" />
      <path d="M13 5 L7 13 h4 l-1 6 6-9 h-4 z" fill="currentColor" />
    </React.Fragment>
  ),
  bolt: (
    <path d="M13 2 L5 13 h5 l-1 9 8-12 h-5 z" fill="currentColor" />
  ),
  chart: (
    <React.Fragment>
      <path d="M3 20 V11 l5-4 5 3 6-6 V20 Z" fill="currentColor" fillOpacity="0.22" />
      <path d="M3 11 l5-4 5 3 6-6" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <circle cx="19" cy="4" r="1.7" fill="currentColor" />
    </React.Fragment>
  ),
  eye: (
    <React.Fragment>
      <path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z" fill="currentColor" fillOpacity="0.22" />
      <circle cx="12" cy="12" r="3.2" fill="currentColor" />
    </React.Fragment>
  ),
  cpu: (
    <React.Fragment>
      <rect x="6" y="6" width="12" height="12" rx="2.6" fill="currentColor" fillOpacity="0.25" />
      <rect x="9.4" y="9.4" width="5.2" height="5.2" rx="1.3" fill="currentColor" />
      <path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
    </React.Fragment>
  ),
  globe: (
    <React.Fragment>
      <circle cx="12" cy="12" r="8.5" fill="currentColor" fillOpacity="0.2" />
      <path d="M3.5 12h17M12 3.5c2.4 2.5 3.5 5.5 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.5-3.5-8.5s1.1-6 3.5-8.5Z" stroke="currentColor" strokeWidth="1.5" fill="none" />
    </React.Fragment>
  ),
  check: (
    <React.Fragment>
      <circle cx="12" cy="12" r="9" fill="currentColor" fillOpacity="0.2" />
      <path d="M8 12.5l2.6 2.6L16 9.4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </React.Fragment>
  ),
  play: (
    <React.Fragment>
      <circle cx="12" cy="12" r="9" fill="currentColor" fillOpacity="0.2" />
      <path d="M10 8.4 L16 12 L10 15.6 Z" fill="currentColor" />
    </React.Fragment>
  ),
  clock: (
    <React.Fragment>
      <circle cx="12" cy="12" r="8.5" fill="currentColor" fillOpacity="0.2" />
      <path d="M12 7.4V12l3.2 2" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" fill="none" />
    </React.Fragment>
  ),
  shield: (
    <React.Fragment>
      <path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z" fill="currentColor" fillOpacity="0.22" />
      <path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </React.Fragment>
  ),
};

function DIcon({ name, size = 22, style }) {
  const glyph = DI[name];
  if (!glyph) {
    const Fallback = window.Icon;
    return Fallback ? <Fallback name={name} size={size} style={style} /> : null;
  }
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style} aria-hidden="true">
      {glyph}
    </svg>
  );
}

Object.assign(window, { DIcon });
