/* Die Symbole der Oberfläche.
   ----------------------------------------------------------------------------
   Als Vektor, nicht als Schriftzeichen. Ein Wiedergabedreieck oder ein
   Lautsprecher-Emoji wird auf jeder Plattform anders gezeichnet, trägt fremde
   Farben, sitzt schief auf der Grundlinie und lässt sich weder in der
   Strichstärke noch in der Farbe anpassen — es sieht nach Platzhalter aus,
   weil es einer ist.

   `currentColor` erbt Farbe und Zustand vom Knopf darum. */

type Zeichner = string | ((n: number) => string);

const ICONS: Record<string, Zeichner> = {
  play: '<path d="M8 5.5v13l11-6.5z" fill="currentColor" stroke="none"/>',
  waveform: '<path d="M3 12h2M7 8v8M11 4.5v15M15 8v8M19 11h2"/>',
  speed: '<path d="M12 20a8 8 0 100-16 8 8 0 000 16z"/><path d="M12 12l4-3"/>',
  // Kreispfeile mit der Sekundenzahl darin — dasselbe Bild wie
  // `gobackward.10` und `goforward.30` auf dem iPad.
  goBack: (n) => `<path d="M11.5 4.5L7 8l4.5 3.5" /><path d="M7 8h4.5a7.5 7.5 0 11-7.2 9.6"/>`
    + `<text x="12" y="17.6" text-anchor="middle" font-size="7.5" font-weight="700"`
    + ` fill="currentColor" stroke="none" font-family="inherit">${n}</text>`,
  goFwd: (n) => `<path d="M12.5 4.5L17 8l-4.5 3.5"/><path d="M17 8h-4.5a7.5 7.5 0 107.2 9.6"/>`
    + `<text x="12" y="17.6" text-anchor="middle" font-size="7.5" font-weight="700"`
    + ` fill="currentColor" stroke="none" font-family="inherit">${n}</text>`,
  captions: '<rect x="3" y="5.5" width="18" height="13" rx="3"/><path d="M9.5 10.5a2.2 2.2 0 100 3M16 10.5a2.2 2.2 0 100 3"/>',
  captionsOn: '<rect x="3" y="5.5" width="18" height="13" rx="3" fill="currentColor" stroke="none"/><path d="M9.5 10.5a2.2 2.2 0 100 3M16 10.5a2.2 2.2 0 100 3" stroke="#0B0B0D"/>',
  check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
  // Rechteck mit Balken oben bzw. Spalte links — die Leiste zieht dorthin.
  barTop: '<rect x="2" y="3.5" width="20" height="17" rx="3"/><path d="M2 9h20"/>'
    + '<rect x="2" y="3.5" width="20" height="5.5" rx="3" fill="currentColor" stroke="none" opacity=".9"/>',
  barSide: '<rect x="2" y="3.5" width="20" height="17" rx="3"/><path d="M8.5 3.5v17"/>'
    + '<rect x="2" y="3.5" width="6.5" height="17" rx="3" fill="currentColor" stroke="none" opacity=".9"/>',
  pause: '<path d="M9 5.5v13M15 5.5v13"/>',
  close: '<path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/>',
  sound: '<path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5H4z" fill="currentColor"/><path d="M16 9a4 4 0 010 6"/><path d="M18.5 6.5a7.5 7.5 0 010 11"/>',
  muted: '<path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5H4z" fill="currentColor"/><path d="M16 9.5l5 5M21 9.5l-5 5"/>',
  expand: '<path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/>',
  left: '<path d="M14.5 5.5L8 12l6.5 6.5"/>',
  right: '<path d="M9.5 5.5L16 12l-6.5 6.5"/>',
  up: '<path d="M12 18.5v-13M6.5 11L12 5.5 17.5 11"/>',
  down: '<path d="M12 5.5v13M6.5 13L12 18.5 17.5 13"/>',
}

/** Ein Symbol als Vektor. `size` nur, wo es von der Vorgabe abweicht. */
export function icon(name: keyof typeof ICONS, size?: number, arg?: number): string {
  const eintrag = ICONS[name];
  const inhalt = typeof eintrag === 'function' ? eintrag(arg ?? 0) : eintrag;
  return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
    stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
    ${size ? `style="width:${size}px;height:${size}px"` : ''}>${inhalt}</svg>`;
}