/* Small icon set used across the app. Stroke-based, matches Intersport DS.
   Names ending in "-cat" render an SVG file from Content/ via CSS mask so it
   inherits currentColor (white on the blue category tiles). */
const MASKED_ICONS = {
  'running': 'Content/running-gym-svgrepo-com.svg',
  'treadmills-cat': 'Content/TREADMILLS.svg?v=2',
  'bikes-cat': 'Content/EXERCISE BIKES.svg',
  'ellipticals-cat': 'Content/ELLIPTICALS.svg',
  'rowing-cat': 'Content/ROWING MACHINES.svg',
  'steppers-cat': 'Content/steppers.svg',
  'benches-cat': 'Content/BENCHES AND MULTIBENCH.svg',
  'yoga-cat': 'Content/YOGA PILATES.svg',
  'functional-cat': 'Content/Functional Training.svg',
  'strength-cat': 'Content/Functional Training.svg',
  'other-cat': 'Content/bottle.svg',
  'exercise-ball': 'Content/exercise-ball-svgrepo-com.svg',
};
const Icon = ({ name, size = 24, className = '' }) => {
  const maskUrl = MASKED_ICONS[name];
  if (maskUrl) {
    const url = `url("${encodeURI(maskUrl)}")`;
    return (
      <span
        className={`icon-mask ${className}`}
        aria-hidden="true"
        style={{
          display: 'inline-block',
          width: size,
          height: size,
          backgroundColor: 'currentColor',
          WebkitMask: `${url} no-repeat center / contain`,
          mask: `${url} no-repeat center / contain`,
        }}
      />
    );
  }
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.75, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    arrowRight: <path d="M5 12h14M13 6l6 6-6 6"/>,
    arrowLeft: <path d="M19 12H5M11 18l-6-6 6-6"/>,
    chevronRight: <path d="M9 6l6 6-6 6"/>,
    chevronDown: <path d="M6 9l6 6 6-6"/>,
    home: <><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></>,
    close: <path d="M6 6l12 12M18 6L6 18"/>,
    play: <path d="M7 5v14l12-7z" fill="currentColor"/>,
    check: <path d="M5 13l4 4 10-10"/>,
    qr: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3M20 14v3M14 20h3M17 17h4M20 20v1"/></>,
    map: <><path d="M9 4l-6 2v14l6-2 6 2 6-2V4l-6 2-6-2z"/><path d="M9 4v14M15 6v14"/></>,
    help: <><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 015 0c0 1.5-2.5 2-2.5 4M12 17h.01"/></>,
    plus: <path d="M12 5v14M5 12h14"/>,
    dumbbell: <><path d="M6 8v8M3 10v4M18 8v8M21 10v4M6 12h12"/></>,
    bolt: <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/>,
    treadmill: <><rect x="3" y="14" width="18" height="6" rx="1"/><path d="M19 14V8M19 8h-3M16 5l3 3"/></>,
    bike: <><circle cx="6" cy="17" r="3"/><circle cx="18" cy="17" r="3"/><path d="M6 17l5-7h5l2 7M14 5h2l1 5"/></>,
    elliptical: <><circle cx="12" cy="14" r="6"/><path d="M12 8V3M9 6h6"/></>,
    rower: <><path d="M3 14l4-2 6 1 8-3"/><circle cx="20" cy="9" r="2"/><path d="M3 18h18"/></>,
    stepper: <><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="9" width="7" height="11" rx="1"/></>,
    weight: <><path d="M14 6a2 2 0 100-4 2 2 0 000 4zM7 22l2-9 4 1 1 8M14 6l-3 6"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    scale: <><path d="M12 3v18M3 8h18M7 8l-3 6a3 3 0 006 0l-3-6M17 8l-3 6a3 3 0 006 0l-3-6"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></>,
    shield: <><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></>,
    speed: <><path d="M12 14l5-5"/><circle cx="12" cy="14" r="9"/><path d="M5 14a7 7 0 0114 0"/></>,
    flame: <path d="M12 3c1 4 5 5 5 10a5 5 0 01-10 0c0-3 2-4 2-7 1 2 3 1 3-3z"/>,
    'box-s': <rect x="9" y="11" width="6" height="6" rx="1"/>,
    'box-m': <rect x="6" y="9" width="12" height="10" rx="1"/>,
    'box-l': <rect x="3" y="6" width="18" height="14" rx="1"/>,
    spark: <path d="M12 5v4M12 15v4M5 12h4M15 12h4"/>,
    spark2: <><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/><circle cx="12" cy="12" r="2"/></>,
    spark3: <><path d="M12 2v8M12 14v8M2 12h8M14 12h8"/><path d="M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4"/></>,
    leaf: <><path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14z"/><path d="M5 19l8-8"/></>,
    'circle-arrows': <><path d="M4 12a8 8 0 0114-5"/><path d="M14 5h4v4"/><path d="M20 12a8 8 0 01-14 5"/><path d="M10 19H6v-4"/></>,
    gloves: <><path d="M7 4h6a3 3 0 013 3v8H7z"/><path d="M16 9h2a2 2 0 012 2v3a2 2 0 01-2 2h-2"/><path d="M7 15v3a2 2 0 002 2h6"/></>,
    store: <><path d="M3 7l2-3h14l2 3M3 7v13h18V7M3 7h18M9 13h6v7H9z"/></>,
  };
  return <svg viewBox="0 0 24 24" {...s} className={className}>{paths[name] || null}</svg>;
};
window.Icon = Icon;