// Icon component — thin wrapper over Font Awesome 6 (Solid + Free-Brands).
//
// API stays compatible with the old inline-SVG implementation: callers
// pass a name string and we emit the right `<i class="fa-..">`. That
// means existing screens keep working through the migration without
// touching every callsite.
//
// Two name surfaces:
//
// 1. The legacy short names the codebase has always used
//    (`play`, `pause`, `check`, `x`, `verified`, `discord`, etc.).
//    Mapped to FA via NAME_MAP below.
//
// 2. The raw Font Awesome glyph name itself (`fa-arrow-right` →
//    `arrow-right`). New code is encouraged to use these directly so
//    we don't have to extend NAME_MAP for every icon used once.
//
// Brand icons (Discord, GitHub, etc.) need `brand=true` so we emit
// `fa-brands` instead of `fa-solid`. Only Discord uses this today.
//
// Color always inherits from the parent via `currentColor`; never bake
// it into the icon. The old SVG implementation had to set `fill={color}`
// per-icon; FA does the right thing automatically through the CSS
// font-color rule.

// Maps legacy names (used throughout the existing screens) to their
// modern Font Awesome 6 equivalents. When you see a key like 'x' here
// that's `<ApIcon name="x"/>` in the old code; it now renders as
// `fa-xmark`. Add new entries as you find old callsites.
const NAME_MAP = {
  // Transport / playback
  'play':         'play',
  'pause':        'pause',
  'wave':         'wave-square',

  // Yes / no
  'check':        'check',
  'x':            'xmark',
  'thumb-up':     'thumbs-up',
  'thumb-down':   'thumbs-down',

  // Identity / trust
  'shield':       'shield',
  'verified':     'circle-check',
  'discord':      'discord',

  // Files / IO
  'upload':       'cloud-arrow-up',
  'image':        'image',
  'music':        'music',
  'inbox':        'inbox',
  'plus':         'plus',
  'logout':       'right-from-bracket',
  'caret':        'chevron-down',
  'help':         'circle-question',
  'search':       'magnifying-glass',

  // Volume
  'volume-mute':  'volume-xmark',
  'volume-low':   'volume-low',
  'volume-high':  'volume-high',

  // Misc
  'bolt':         'bolt',
  'clock':        'clock',
};

// Brand-set icons (rendered with `fa-brands` instead of `fa-solid`).
// Keep this list short — most icons are solid.
const BRAND_NAMES = new Set(['discord', 'github', 'twitter', 'youtube']);

function ApIcon({ name, size = 20, color = 'currentColor', style = {}, className = '' }) {
  // Resolve legacy → FA. If the name isn't in NAME_MAP, treat it as
  // the FA name itself (lets new code pass `arrow-right` etc. directly).
  const faName = NAME_MAP[name] || name;
  const isBrand = BRAND_NAMES.has(name) || BRAND_NAMES.has(faName);
  const family = isBrand ? 'fa-brands' : 'fa-solid';

  // `size` accepts both numbers (rendered as px, matching the old API)
  // and strings (passed through verbatim — useful for inheriting
  // `1em` from a parent's font-size).
  const fontSize = typeof size === 'number' ? `${size}px` : size;

  return (
    <i
      className={`${family} fa-${faName} ${className}`.trim()}
      style={{ fontSize, color, lineHeight: 1, ...style }}
    />
  );
}

// Backward-compat alias for design code that uses bare `<Icon/>`.
const Icon = ApIcon;

Object.assign(window, { ApIcon, Icon });