// SVG Icon-Komponenten

const Icon = ({ name, size = 18, stroke = 2 }) => {
  const props = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: stroke,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
  };
  switch (name) {
    case 'cursor':
      return <svg {...props}><path d="M3 3l7 17 2.5-7 7-2.5L3 3z"/></svg>;
    case 'pin':
      return <svg {...props}><path d="M12 22s7-7.58 7-13a7 7 0 1 0-14 0c0 5.42 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'pen':
      return <svg {...props}><path d="M12 19l7-7 3 3-7 7H12v-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>;
    case 'highlight':
      return <svg {...props}><path d="M9 11l-6 6v3h3l6-6"/><path d="M22 12l-4.5 4.5-5-5L17 7l5 5z"/><path d="M15 6l3 3"/></svg>;
    case 'eraser':
      return <svg {...props}><path d="M20 20H7L3 16a2 2 0 0 1 0-2.8L13.2 3a2 2 0 0 1 2.8 0L21 8a2 2 0 0 1 0 2.8L11 21"/><path d="M14 5l5 5"/></svg>;
    case 'upload':
      return <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>;
    case 'plus':
      return <svg {...props}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
    case 'trash':
      return <svg {...props}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>;
    case 'x':
      return <svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
    case 'check':
      return <svg {...props}><polyline points="20 6 9 17 4 12"/></svg>;
    case 'message':
      return <svg {...props}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
    case 'list':
      return <svg {...props}><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>;
    case 'calendar':
      return <svg {...props}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>;
    case 'music':
      return <svg {...props}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>;
    case 'download':
      return <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>;
    case 'eye':
      return <svg {...props}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'chevron-right':
      return <svg {...props}><polyline points="9 18 15 12 9 6"/></svg>;

    case 'undo':
      return <svg {...props}><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>;
    case 'package':
      return <svg {...props}><path d="M21 8V21H3V8"/><path d="M23 3H1v5h22V3z"/><path d="M10 12h4"/></svg>;
    case 'import':
      return <svg {...props}><path d="M12 3v12"/><polyline points="8 11 12 15 16 11"/><path d="M20 21H4"/></svg>;
    case 'shield':
      return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;

    // === Phrasierungs-Einzeichnungen (aus Gestaltung-Phrasierung.pdf) ===

    // Phrasierungsbogen mit Ziel (Bogen + Pfeilspitze)
    case 'phrase-bow':
      return <svg {...props}><path d="M4 18 C4 8, 20 8, 20 18" fill="none"/><polyline points="17 16 20 18 17 20"/></svg>;

    // Atemzeichen (V)
    case 'breath':
      return <svg {...props} strokeWidth={2.5}><polyline points="6 6 12 20 18 6"/></svg>;

    // Zäsur ohne Atem (zwei Schrägstriche)
    case 'caesura':
      return <svg {...props} strokeWidth={2.5}><line x1="8" y1="18" x2="12" y2="6"/><line x1="12" y1="18" x2="16" y2="6"/></svg>;

    // Stark betonte Silbe / Akzent (>)
    case 'accent':
      return <svg {...props} strokeWidth={2.5}><polyline points="4 8 20 12 4 16"/></svg>;

    // Betonter Einsatz und anschließendes Abschwingen (Akzent + Decrescendo-Gabel)
    case 'attack-decay':
      return <svg {...props} strokeWidth={2}><polyline points="2 8 9 12 2 16"/><line x1="11" y1="8" x2="22" y2="12"/><line x1="11" y1="16" x2="22" y2="12"/></svg>;

    // Nicht betonte Silbe (kleiner Kreis)
    case 'not-stressed':
      return <svg {...props} strokeWidth={2}><circle cx="12" cy="12" r="5" fill="none"/></svg>;

    // Fermata (Haltebogen + Punkt)
    case 'fermata':
      return <svg {...props}><path d="M4 18 C4 8, 20 8, 20 18" fill="none"/><circle cx="12" cy="15" r="1.5" fill="currentColor" stroke="none"/></svg>;

    // Tenuto / deutlich sprechen (Unterstrich)
    case 'tenuto':
      return <svg {...props} strokeWidth={3}><line x1="6" y1="12" x2="18" y2="12"/></svg>;

    // Staccato / schwach betonte Silbe (Punkt)
    case 'staccato':
      return <svg {...props}><circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/></svg>;

    // Trennstrich (zwischen Silben/Wörtern)
    case 'separator':
      return <svg {...props} strokeWidth={2.5}><line x1="12" y1="6" x2="12" y2="18"/></svg>;

    // Verbindungsbogen (Wörter verbinden — flacher Bogen unten)
    case 'tie':
      return <svg {...props}><path d="M4 10 C4 18, 20 18, 20 10" fill="none"/></svg>;

    // === Schlagbilder ===

    // 1er Schlagbild (senkrechter Abschlag)
    case 'beat-1':
      return <svg {...props} strokeWidth={3}><line x1="12" y1="3" x2="12" y2="21"/></svg>;

    // 2er Schlagbild (runter + rechts: L-Form)
    case 'beat-2':
      return <svg {...props} strokeWidth={3}><line x1="6" y1="3" x2="6" y2="18"/><line x1="6" y1="18" x2="21" y2="18"/></svg>;

    // 3er Schlagbild (Dreieck: runter, rechts, schräg zurück hoch)
    case 'beat-3':
      return <svg {...props} strokeWidth={3}><polyline points="6,3 6,18 21,18 6,3" fill="none"/></svg>;

    // 4er Schlagbild (T-Form: runter, links-rechts Grundlinie)
    case 'beat-4':
      return <svg {...props} strokeWidth={3}><line x1="12" y1="3" x2="12" y2="18"/><line x1="3" y1="18" x2="21" y2="18"/></svg>;

    default:
      return null;
  }
};

window.Icon = Icon;