// icons.jsx — line-icon set (Tailwind sizing via w-/h- on the svg)
// Production (Vite): add `export function Icon(...)` and remove the window line at the bottom.
function Icon({ name, className = "w-6 h-6", stroke = 2 }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    user:    <><circle cx="12" cy="8" r="4" {...p} /><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6" {...p} /></>,
    lock:    <><rect x="4.5" y="10.5" width="15" height="10" rx="2.5" {...p} /><path d="M8 10.5V7a4 4 0 018 0v3.5" {...p} /></>,
    lockopen:<><rect x="4.5" y="10.5" width="15" height="10" rx="2.5" {...p} /><path d="M8 10.5V7a4 4 0 017.5-2" {...p} /></>,
    paw:     <><circle cx="12" cy="15" r="3.5" {...p} /><circle cx="6.5" cy="11" r="1.7" {...p} /><circle cx="17.5" cy="11" r="1.7" {...p} /><circle cx="9" cy="6.5" r="1.6" {...p} /><circle cx="15" cy="6.5" r="1.6" {...p} /></>,
    dice:    <><rect x="4" y="4" width="16" height="16" rx="4" {...p} /><circle cx="9" cy="9" r="1.1" fill="currentColor" stroke="none" /><circle cx="15" cy="15" r="1.1" fill="currentColor" stroke="none" /><circle cx="12" cy="12" r="1.1" fill="currentColor" stroke="none" /></>,
    arrow:   <path d="M5 12h14M13 6l6 6-6 6" {...p} />,
    check:   <path d="M5 13l4 4L19 7" {...p} />,
    cap:     <><path d="M12 4l10 5-10 5L2 9z" {...p} /><path d="M6 11v5c0 1.4 2.7 3 6 3s6-1.6 6-3v-5" {...p} /></>,
    pin:     <><path d="M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z" {...p} /><circle cx="12" cy="10" r="2.6" {...p} /></>,
    heart:   <path d="M12 20S4 14.5 4 9.2A4.2 4.2 0 0112 6a4.2 4.2 0 018 3.2C20 14.5 12 20 12 20z" {...p} />,
    music:   <><path d="M9 18V6l10-2v12" {...p} /><circle cx="6.5" cy="18" r="2.5" {...p} /><circle cx="16.5" cy="16" r="2.5" {...p} /></>,
    sparkle: <path d="M12 3v6M12 15v6M3 12h6M15 12h6" {...p} />,
    qr:      <><rect x="4" y="4" width="6" height="6" rx="1" {...p} /><rect x="14" y="4" width="6" height="6" rx="1" {...p} /><rect x="4" y="14" width="6" height="6" rx="1" {...p} /><path d="M14 14h2v2M20 14v6M14 20h6" {...p} /></>,
    logout:  <><path d="M14 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2v-2" {...p} /><path d="M10 12h10M17 9l3 3-3 3" {...p} /></>,
    share:   <><circle cx="6" cy="12" r="2.5" {...p} /><circle cx="17" cy="6" r="2.5" {...p} /><circle cx="17" cy="18" r="2.5" {...p} /><path d="M8.2 10.8l6.6-3.6M8.2 13.2l6.6 3.6" {...p} /></>,
    eye:     <><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z" {...p} /><circle cx="12" cy="12" r="3" {...p} /></>,
    eyeoff:  <><path d="M3 3l18 18" {...p} /><path d="M10.6 6.1A9.6 9.6 0 0112 6c6 0 9.5 6 9.5 6a16 16 0 01-3 3.6M6.5 7.6A16 16 0 002.5 12s3.5 6 9.5 6a9.2 9.2 0 003.4-.6" {...p} /><path d="M9.9 9.9a3 3 0 104.2 4.2" {...p} /></>,
  };
  return <svg viewBox="0 0 24 24" className={className}>{paths[name]}</svg>;
}

window.Icon = Icon;