/* Music-inspired icons + UI icons (single-stroke currentColor) */

const baseProps = (size = 18, stroke = 2) => ({
  width: size, height: size, viewBox: "0 0 24 24", fill: "none",
  stroke: "currentColor", strokeWidth: stroke,
  strokeLinecap: "round", strokeLinejoin: "round",
});

const Icon = {
  // ── Global nav (music-inspired) ────────────────────────────
  Home: ({ size = 22 }) => ( // little metronome
    <svg {...baseProps(size, 1.8)}>
      <path d="M9 4h6l3 17H6z"/>
      <path d="M12 8 9 18"/>
      <circle cx="14.5" cy="14" r="0.6" fill="currentColor"/>
    </svg>
  ),
  Library: ({ size = 22 }) => ( // sheet music / book stack
    <svg {...baseProps(size, 1.8)}>
      <path d="M4 5a2 2 0 0 1 2-2h12v17H6a2 2 0 0 0-2 2z"/>
      <path d="M8 7h7M8 10h7M8 13h5"/>
    </svg>
  ),
  Pass: ({ size = 22 }) => ( // key
    <svg {...baseProps(size, 1.8)}>
      <circle cx="8" cy="12" r="3.5"/>
      <path d="M11.5 12H21"/>
      <path d="M17 12v3"/>
      <path d="M20 12v2"/>
    </svg>
  ),
  Discover: ({ size = 22 }) => ( // compass with note
    <svg {...baseProps(size, 1.8)}>
      <circle cx="12" cy="12" r="9"/>
      <path d="m15.5 8.5-2 5-5 2 2-5z"/>
    </svg>
  ),
  Practice: ({ size = 22 }) => ( // piano keys
    <svg {...baseProps(size, 1.8)}>
      <rect x="3" y="6" width="18" height="12" rx="1.5"/>
      <path d="M9 6v8M15 6v8"/>
      <rect x="7" y="6" width="2.4" height="6" fill="currentColor" stroke="none"/>
      <rect x="13.6" y="6" width="2.4" height="6" fill="currentColor" stroke="none"/>
    </svg>
  ),
  Help: ({ size = 22 }) => ( // tuning fork / question
    <svg {...baseProps(size, 1.8)}>
      <circle cx="12" cy="12" r="9"/>
      <path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5"/>
      <circle cx="12" cy="16.5" r="0.7" fill="currentColor"/>
    </svg>
  ),
  Account: ({ size = 22 }) => (
    <svg {...baseProps(size, 1.8)}>
      <circle cx="12" cy="9" r="3.5"/>
      <path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5"/>
    </svg>
  ),
  // ── UI ────────────────────────────────────────────────────
  ChevronRight: ({ size = 14 }) => (<svg {...baseProps(size, 2)}><path d="m9 6 6 6-6 6"/></svg>),
  ChevronLeft:  ({ size = 14 }) => (<svg {...baseProps(size, 2)}><path d="m15 6-6 6 6 6"/></svg>),
  ChevronDown:  ({ size = 14 }) => (<svg {...baseProps(size, 2)}><path d="m6 9 6 6 6-6"/></svg>),
  ChevronsLeft: ({ size = 16 }) => (
    <svg {...baseProps(size, 2)}><path d="m11 6-6 6 6 6"/><path d="m18 6-6 6 6 6"/></svg>
  ),
  ChevronsRight: ({ size = 16 }) => (
    <svg {...baseProps(size, 2)}><path d="m6 6 6 6-6 6"/><path d="m13 6 6 6-6 6"/></svg>
  ),
  Check: ({ size = 12 }) => (<svg {...baseProps(size, 2.6)}><path d="m4 12 5 5L20 6"/></svg>),
  Star: ({ size = 16, filled = false }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"}
         stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/>
    </svg>
  ),
  Print: ({ size = 16 }) => (
    <svg {...baseProps(size)}><path d="M7 9V4h10v5"/><rect x="4" y="9" width="16" height="8" rx="1.5"/><path d="M7 14h10v6H7z"/></svg>
  ),
  Play: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M7 4.5v15a1 1 0 0 0 1.5.87l13-7.5a1 1 0 0 0 0-1.74l-13-7.5A1 1 0 0 0 7 4.5z"/>
    </svg>
  ),
  PlaySmall: ({ size = 12 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M8 5v14l11-7z"/>
    </svg>
  ),
  Headphones: ({ size = 16 }) => (
    <svg {...baseProps(size, 1.8)}>
      <path d="M4 14a8 8 0 0 1 16 0"/>
      <rect x="3" y="13" width="4" height="7" rx="1.2"/>
      <rect x="17" y="13" width="4" height="7" rx="1.2"/>
    </svg>
  ),
  Menu: ({ size = 18 }) => (<svg {...baseProps(size)}><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>),
  X: ({ size = 16 }) => (<svg {...baseProps(size)}><path d="M6 6l12 12"/><path d="M18 6 6 18"/></svg>),
  Clock: ({ size = 14 }) => (<svg {...baseProps(size)}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>),
  FileText: ({ size = 14 }) => (
    <svg {...baseProps(size)}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></svg>
  ),
  // little double-bar collapse glyph
  PanelClose: ({ size = 16 }) => (
    <svg {...baseProps(size, 2)}><path d="m13 6-6 6 6 6"/><path d="M19 5v14"/></svg>
  ),
  PanelOpen: ({ size = 16 }) => (
    <svg {...baseProps(size, 2)}><path d="m11 6 6 6-6 6"/><path d="M5 5v14"/></svg>
  ),
};

window.Icon = Icon;