/* Icon — geometric SVG glyphs */
(function () {
  const Icon = {
    Play:  () => <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 1.5L12 7L3 12.5V1.5Z" fill="currentColor"/></svg>,
    Pause: () => <svg width="14" height="14" viewBox="0 0 14 14"><rect x="3" y="2" width="3" height="10" rx="1" fill="currentColor"/><rect x="8" y="2" width="3" height="10" rx="1" fill="currentColor"/></svg>,
    Stop:  () => <svg width="14" height="14" viewBox="0 0 14 14"><rect x="3" y="3" width="8" height="8" rx="1.5" fill="currentColor"/></svg>,
    Skip:  () => <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 2v10l7-5z" fill="currentColor"/><rect x="10" y="2" width="2" height="10" rx="0.6" fill="currentColor"/></svg>,
    Check: () => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7.5L6 10.5L11 4.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    Chevron: ({dir="right"}) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{transform: dir==="up" ? "rotate(-90deg)" : dir==="down" ? "rotate(90deg)" : "none"}}><path d="M5 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    Flame: () => <svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><path d="M6 1c-1 2 1 3 0 5C5 7 3 6 3 8a3 3 0 006 0c0-2-1-3-2-4-1-1-1-2 0-3-.4 0-.8.4-1 0z"/></svg>,
  };

  window.Icon = Icon;
})();