// Goodie Hunter — Icon 元件
// 線條圖示；tab bar 用 filled 變體。SVG 原始檔在 shared/icons/。

function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.8, filled = false }) {
  const paths = {
    bell:    <><path d="M6 8a6 6 0 1 1 12 0c0 5 2 6 2 7H4c0-1 2-2 2-7Z"/><path d="M10 19a2 2 0 0 0 4 0"/></>,
    plus:    <><path d="M12 5v14M5 12h14"/></>,
    search:  <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    scan:    <><circle cx="10.5" cy="10.5" r="7.2"/><path d="m20 20-3.9-3.9"/><path d="m7.4 12.2 2-2.3 1.6 1.4 2.1-2.6" strokeWidth={1.4}/></>,
    chevron: <path d="m9 6 6 6-6 6"/>,
    'chevron-down': <path d="m6 9 6 6 6-6"/>,
    clock:   <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    back:    <path d="m15 6-6 6 6 6"/>,
    more:    <><circle cx="6" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="18" cy="12" r="1.4"/></>,
    mute:    <><path d="M11 5 6 9H3v6h3l5 4V5Z"/><path d="m16 9 5 6M21 9l-5 6"/></>,
    pin:     <><path d="M9 4h6l1 5-2 2v2H10v-2L8 9Z" strokeLinejoin="round"/><path d="M12 13v7"/><path d="M10 20h4"/></>,
    chart:   <><path d="M4 20h16"/><path d="m4 16 4-4 3 3 5-7 4 5"/></>,
    candles: <><path d="M6 3v3"/><rect x="4" y="6" width="4" height="9" rx="0.5"/><path d="M6 15v3"/><path d="M12 4v4"/><rect x="10" y="8" width="4" height="11" rx="0.5"/><path d="M12 19v2"/><path d="M18 7v3"/><rect x="16" y="10" width="4" height="6" rx="0.5"/><path d="M18 16v3"/></>,
    funnel:  <path d="M4 5h16l-6 7v6l-4-2v-4L4 5Z" strokeLinejoin="round"/>,
    alarm:   <><circle cx="12" cy="13" r="8"/><path d="M12 9v4l3 2"/><path d="m6 4-2 2M18 4l2 2"/></>,
    edit:    <><path d="M16 3l5 5-11 11H5v-5L16 3Z" strokeLinejoin="round"/><path d="m13.5 5.5 5 5"/></>,
    'list-edit': <><path d="M4 6h10"/><path d="M4 12h7"/><path d="M4 18h6"/><path d="M15.5 15.4 20 10.9l1.6 1.6-4.5 4.5H15.5v-1.6Z" strokeLinejoin="round"/></>,
    'reorder-vert': <><path d="M8 4v16M8 4 5 7M8 4l3 3"/><path d="M16 20V4M16 20l-3-3M16 20l3-3"/></>,
    grip:    <><path d="M6 9h12"/><path d="M6 15h12"/></>,
    wrench:  <path d="M14.7 6.3a3.6 3.6 0 0 0-4.7 4.5L4 16.8V20h3.2l6-6a3.6 3.6 0 0 0 4.5-4.7l-2.4 2.4-1.9-.5-.5-1.9 2.3-2.3Z" strokeLinejoin="round"/>,
    tune: <><path d="M20 7h-9M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></>,
    check:   <path d="m5 13 4 4 10-10"/>,
    x:       <><path d="M6 6 18 18"/><path d="M18 6 6 18"/></>,
    flame:   <path d="M12 2c1 4-3 5-3 9a3 3 0 0 0 6 0c0-2-1-3-1-3 2 1 3 3 3 6a5 5 0 0 1-10 0c0-5 5-7 5-12Z"/>,
    sliders: <><path d="M4 6h12"/><circle cx="18" cy="6" r="2"/><path d="M4 12h6"/><circle cx="12" cy="12" r="2"/><path d="M16 12h4"/><path d="M4 18h10"/><circle cx="16" cy="18" r="2"/><path d="M18 18h2"/></>,
    settings:<><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.5-2.4.9a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.5a7 7 0 0 0-2 1.2l-2.4-.9-2 3.5 2 1.5A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.5 2.4-.9a7 7 0 0 0 2 1.2L10 21h4l.5-2.5a7 7 0 0 0 2-1.2l2.4.9 2-3.5-2-1.5c.1-.4.1-.8.1-1.2Z"/></>,
    bolt:    <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/>,
    signal:  <><path d="M4 14v2"/><path d="M8 11v5"/><path d="M12 7v9"/><path d="M16 11v5"/><path d="M20 14v2"/></>,
    'check-all': <><path d="m2 13 4 4 8-8"/><path d="m10 17 2 2 10-10"/></>,
    sweep:   <><path d="m4 20 6-6"/><path d="M11 13 17 7l4 4-6 6Z"/><path d="m9 15 2 2"/><path d="M3 21h6"/></>,
    arrow:   <path d="M12 5v14m-6-6 6 6 6-6"/>,
    'arrow-right': <path d="M5 12h14m-6-6 6 6-6 6"/>,
    undo:    <><path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/></>,
    megaphone: <><path d="M4 10v4a1 1 0 0 0 1 1h2l8 4V5L7 9H5a1 1 0 0 0-1 1Z"/><path d="M18 9a3 3 0 0 1 0 6"/><path d="M7 15v3a2 2 0 0 0 4 0v-2"/></>,
    trash:   <><path d="M4 7h16"/><path d="M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/><path d="M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/><path d="M10 11v7M14 11v7"/></>,
    refresh: <><path d="M20 12a8 8 0 1 1-2.3-5.6"/><path d="M20 4v4h-4"/></>,
    select:  <><rect x="3.5" y="3.5" width="17" height="17" rx="3"/><path d="m8 12 3 3 6-7"/></>,
    share:   <><path d="M12 3v13"/><path d="m8 7 4-4 4 4"/><path d="M6 12H5a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-1"/></>,
    'more-v':   <><circle cx="12" cy="6" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="18" r="1.4"/></>,
    'user-plus':<><circle cx="9" cy="8" r="3.4"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M18 8v6M21 11h-6"/></>,
    user:    <><circle cx="12" cy="8" r="3.6"/><path d="M5 20a7 7 0 0 1 14 0"/></>,
    users:   <><path d="M16 20v-1.5a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4V20"/><circle cx="9" cy="7" r="3.5"/><path d="M22 20v-1.5a4 4 0 0 0-3-3.87"/><path d="M15.5 3.9a3.5 3.5 0 0 1 0 6.5"/></>,
    mail:    <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.5 7 8.5 6 8.5-6"/></>,
    info:    <><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/></>,
    shield:  <><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z" strokeLinejoin="round"/></>,
    doc:     <><path d="M7 3h7l5 5v13H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" strokeLinejoin="round"/><path d="M14 3v5h5"/><path d="M9 13h7M9 17h7"/></>,
    logout:  <><path d="M9 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></>,
    opend:   <><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 8.5h18"/><path d="M10 12.5 7.5 15l2.5 2.5M14 12.5 16.5 15 14 17.5" strokeLinecap="round" strokeLinejoin="round"/></>,
    sun:     <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"/></>,
    globe:   <><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z"/></>,
    'text-size': <><path d="M4 7V5h9v2"/><path d="M8.5 5v13"/><path d="M6.5 18h4"/><path d="M14 12v-1.5h7V12"/><path d="M17.5 10.5V18"/><path d="M16 18h3"/></>,
  };
  // Filled variants for tab-bar icons. Outer shapes get fill=color; inner detail strokes
  // are drawn in the surface color so they read as cut-outs.
  const filledPaths = {
    bell: <>
      <path d="M6 8a6 6 0 1 1 12 0c0 5 2 6 2 7H4c0-1 2-2 2-7Z" fill={color} stroke={color}/>
      <path d="M10 19a2 2 0 0 0 4 0" fill="none" stroke={color}/>
    </>,
    funnel: <path d="M4 5h16l-6 7v6l-4-2v-4L4 5Z" fill={color} stroke={color} strokeLinejoin="round"/>,
    settings: <>
      <path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.5-2.4.9a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.5a7 7 0 0 0-2 1.2l-2.4-.9-2 3.5 2 1.5A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.5 2.4-.9a7 7 0 0 0 2 1.2L10 21h4l.5-2.5a7 7 0 0 0 2-1.2l2.4.9 2-3.5-2-1.5c.1-.4.1-.8.1-1.2Z" fill={color} stroke={color} strokeLinejoin="round"/>
      <circle cx="12" cy="12" r="2.6" fill="#FAF7F2" stroke="#FAF7F2"/>
    </>,
    megaphone: <>
      <path d="M4 10v4a1 1 0 0 0 1 1h2l8 4V5L7 9H5a1 1 0 0 0-1 1Z" fill={color} stroke={color} strokeLinejoin="round"/>
      <path d="M18 9a3 3 0 0 1 0 6" fill="none" stroke={color}/>
      <path d="M7 15v3a2 2 0 0 0 4 0v-2" fill={color} stroke={color} strokeLinejoin="round"/>
    </>,
  };
  if (filled && filledPaths[name]) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
           strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
        {filledPaths[name]}
      </svg>
    );
  }
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
         strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      {paths[name] || null}
    </svg>
  );
}
window.Icon = Icon;