// Single SVG icon component. Names are referenced by string elsewhere.

function ApIcon({ name, size = 20, color = 'currentColor', style = {} }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', style };
  switch (name) {
    case 'play':      return <svg {...p} fill={color} stroke="none"><path d="M7 5l12 7-12 7z"/></svg>;
    case 'pause':     return <svg {...p} fill={color} stroke="none"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>;
    case 'check':     return <svg {...p}><path d="M5 12l5 5L20 7"/></svg>;
    case 'x':         return <svg {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'thumb-up':  return <svg {...p}><path d="M7 22V11M2 13v7a2 2 0 002 2h3M7 11l5-9c1.5 0 3 1 3 3v4h5a2 2 0 012 2l-2 8a3 3 0 01-3 2H7"/></svg>;
    case 'thumb-down':return <svg {...p}><path d="M17 2v11M22 11V4a2 2 0 00-2-2h-3M17 13l-5 9c-1.5 0-3-1-3-3v-4H4a2 2 0 01-2-2l2-8a3 3 0 013-2h10"/></svg>;
    case 'shield':    return <svg {...p}><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'verified':  return (
      <svg width={size} height={size} viewBox="0 0 24 24" style={style}>
        <path fill={color} d="M12 1.5l2.4 2.1 3.2-.4.8 3.1 2.9 1.4-1 3.1 1 3.1-2.9 1.4-.8 3.1-3.2-.4L12 19.5l-2.4-2.1-3.2.4-.8-3.1-2.9-1.4 1-3.1-1-3.1 2.9-1.4.8-3.1 3.2.4z"/>
        <path d="M8 12l3 3 5-6" stroke="#0a0a14" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      </svg>
    );
    case 'discord':   return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} style={style}>
        <path d="M19.3 5.3a17 17 0 00-4.2-1.3l-.2.4a13 13 0 00-3.8 0l-.2-.4a16.5 16.5 0 00-4.2 1.3A17.5 17.5 0 002.5 17a16.7 16.7 0 005 2.6l.4-.7a11 11 0 01-1.7-.8l.4-.3a12 12 0 0010.8 0l.4.3a11 11 0 01-1.7.8l.4.7a16.6 16.6 0 005-2.6 17.4 17.4 0 00-2.2-11.7zM9 14.4c-1 0-1.8-.9-1.8-2 0-1.2.8-2.1 1.8-2.1s1.9.9 1.8 2c0 1.2-.8 2.1-1.8 2.1zm6 0c-1 0-1.8-.9-1.8-2 0-1.2.8-2.1 1.8-2.1s1.9.9 1.8 2c0 1.2-.8 2.1-1.8 2.1z"/>
      </svg>
    );
    case 'upload':    return <svg {...p}><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>;
    case 'image':     return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="M21 15l-5-5L5 21"/></svg>;
    case 'music':     return <svg {...p}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>;
    case 'clock':     return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'inbox':     return <svg {...p}><path d="M22 12h-6l-2 3h-4l-2-3H2M5.5 5h13a2 2 0 011.8 1.1l3.7 7v6a2 2 0 01-2 2H2a2 2 0 01-2-2v-6L3.7 6a2 2 0 011.8-1.1z"/></svg>;
    case 'plus':      return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'logout':    return <svg {...p}><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/></svg>;
    case 'bolt':      return <svg {...p} fill={color} stroke="none"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></svg>;
    case 'caret':     return <svg {...p}><path d="M6 9l6 6 6-6"/></svg>;
    case 'help':      return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 015 0c0 2-2.5 2-2.5 4M12 17h.01"/></svg>;
    case 'search':    return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case 'volume-mute': return <svg {...p}><path d="M11 5L6 9H2v6h4l5 4z"/><path d="M22 9l-6 6M16 9l6 6"/></svg>;
    case 'volume-low':  return <svg {...p}><path d="M11 5L6 9H2v6h4l5 4z"/><path d="M16 9a4 4 0 010 6"/></svg>;
    case 'volume-high': return <svg {...p}><path d="M11 5L6 9H2v6h4l5 4z"/><path d="M16 8a5 5 0 010 8M19 5a9 9 0 010 14"/></svg>;
    case 'wave': {
      const bars = [6, 12, 8, 18, 22, 14, 10, 16, 8, 12, 6];
      return (
        <svg width={size * 1.6} height={size} viewBox={`0 0 ${bars.length * 3} 24`} style={style}>
          {bars.map((h, i) => (
            <rect key={i} x={i * 3} y={(24 - h) / 2} width="2" height={h} rx="1" fill={color}/>
          ))}
        </svg>
      );
    }
    default: return null;
  }
}

window.ApIcon = ApIcon;