/* global React */
// wf-mobile · icons.jsx
// Lucide-inspired 24px stroke icons, inline SVG. Stroke 1.6 for crispness.
window.WFMobile = window.WFMobile || {};

const ICON_PATHS = {
  home: <><path d="M3 11.5L12 4l9 7.5"/><path d="M5 10v10h14V10"/></>,
  homeFill: <><path d="M3 11.5L12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z" fill="currentColor" stroke="none"/></>,
  wallet: <><path d="M3 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M16 13h3"/><path d="M3 9h14"/></>,
  walletFill: <><path d="M3 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1H3z" fill="currentColor" stroke="none"/><path d="M3 9h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="currentColor" stroke="none"/><circle cx="17" cy="13.5" r="1.2" fill="#fff" stroke="none"/></>,
  history: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
  historyFill: <><circle cx="12" cy="12" r="9" fill="currentColor" stroke="none"/><path d="M12 7v5l3 2" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/></>,
  gift: <><rect x="3" y="8" width="18" height="13" rx="1.5"/><path d="M3 12h18"/><path d="M12 8v13"/><path d="M8 8s-2-3 0-4 4 4 4 4-2 0-4 0z"/><path d="M16 8s2-3 0-4-4 4-4 4 2 0 4 0z"/></>,
  giftFill: <><rect x="3" y="8" width="18" height="13" rx="1.5" fill="currentColor" stroke="none"/><path d="M3 12h18" stroke="#fff" strokeWidth="1.4"/><path d="M12 8v13" stroke="#fff" strokeWidth="1.4"/></>,
  user: <><circle cx="12" cy="8" r="4"/><path d="M4 20c1.5-4 5-6 8-6s6.5 2 8 6"/></>,
  userFill: <><circle cx="12" cy="8" r="4" fill="currentColor" stroke="none"/><path d="M4 20c1.5-4 5-6 8-6s6.5 2 8 6" fill="currentColor" stroke="none"/></>,
  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 14h3v3h-3zM18 18h3v3h-3zM14 19h3"/></>,
  barcode: <><path d="M4 5v14M7 5v14M10 5v10M13 5v14M16 5v10M19 5v14"/></>,
  bell: <><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2H4.5z"/><path d="M10 21h4"/></>,
  chevron: <path d="M9 6l6 6-6 6"/>,
  chevronDown: <path d="M6 9l6 6 6-6"/>,
  plus: <><path d="M12 5v14"/><path d="M5 12h14"/></>,
  share: <><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8 11l8-4"/><path d="M8 13l8 4"/></>,
  scan: <><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M3 12h18"/></>,
  copy: <><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></>,
  sparkle: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3"/></>,
  leaf: <><path d="M5 19c8 0 14-6 14-14C5 5 5 13 5 19z"/><path d="M5 19c4-4 8-7 14-14"/></>,
  whatsapp: <><path d="M4 20l1.5-4A8 8 0 1 1 9 19.5z"/><path d="M8 11c.5 1.5 1.5 2.5 3 3l1.5-1 2 1.5c-.5 1.5-2 2-3.5 1.5C8 15 7 13 7 11z" fill="currentColor" stroke="none"/></>,
  globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18"/><path d="M12 3a14 14 0 0 0 0 18"/></>,
  shield: <path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"/>,
  lock: <><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
  logout: <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></>,
  check: <path d="M5 12l5 5L20 7"/>,
  close: <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>,
  search: <><circle cx="11" cy="11" r="7"/><path d="M16.5 16.5L21 21"/></>,
  filter: <path d="M4 6h16l-6 8v6l-4-2v-4z"/>,
  star: <path d="M12 3l2.5 6 6.5.6-5 4.5 1.5 6.4L12 17l-5.5 3.5L8 14.1l-5-4.5L9.5 9z"/>,
  starFill: <path d="M12 3l2.5 6 6.5.6-5 4.5 1.5 6.4L12 17l-5.5 3.5L8 14.1l-5-4.5L9.5 9z" fill="currentColor"/>,
  mapPin: <><path d="M12 21s-7-6-7-12a7 7 0 0 1 14 0c0 6-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></>,
  receipt: <><path d="M5 3h14v18l-3-2-3 2-3-2-3 2-2-2z"/><path d="M8 8h8M8 12h8M8 16h5"/></>,
  flame: <path d="M12 2c1 4 4 5 4 9a4 4 0 1 1-8 0c0-2 1-3 2-4 0 2 1 2 2 2 0-3-1-4 0-7z"/>,
  trending: <><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></>,
};

function Icon({ name, size = 22, color = 'currentColor', strokeWidth = 1.6, fill = 'none' }) {
  const path = ICON_PATHS[name];
  if (!path) return null;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
         stroke={color} strokeWidth={strokeWidth}
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {path}
    </svg>
  );
}

window.WFMobile.Icon = Icon;