/* Icons.jsx — Lucide-derived thick-stroke icon set (stroke-width 2.25)
   Substitution flagged in README/ICONOGRAPHY: no brand icon set was provided,
   so we use Lucide path data at a heavier stroke to approximate the
   "thick-line illustration" look for functional UI. */

const CH_ICON_PATHS = {
  search:   '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
  cart:     '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
  user:     '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
  menu:     '<path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/>',
  heart:    '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.5 4.04 3 5.5l7 7Z"/>',
  chevronRight: '<path d="m9 18 6-6-6-6"/>',
  chevronDown:  '<path d="m6 9 6 6 6-6"/>',
  chevronLeft:  '<path d="m15 18-6-6 6-6"/>',
  x:        '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
  truck:    '<path d="M14 18V6a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h1"/><path d="M14 9h4l3 3v5a1 1 0 0 1-1 1h-1"/><circle cx="6.5" cy="18" r="2"/><circle cx="16.5" cy="18" r="2"/>',
  plus:     '<path d="M12 5v14"/><path d="M5 12h14"/>',
  minus:    '<path d="M5 12h14"/>',
  filter:   '<polygon points="21 4 3 4 10 12.5 10 19 14 21 14 12.5"/>',
  check:    '<path d="M20 6 9 17l-5-5"/>',
  arrowRight:'<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
  star:     '<path d="M11.5 2.6 14 8l6 .5-4.6 4 1.5 6-5.4-3.4L6 18.5l1.5-6L3 8.5 9 8Z"/>',
  mapPin:   '<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>',
  refresh:  '<path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/>',
};

function Icon({ name, size = 22, stroke = 2.25, fill = 'none', color = 'currentColor', style = {} }) {
  const inner = CH_ICON_PATHS[name] || '';
  const isStar = name === 'star';
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24"
      fill={isStar ? color : fill}
      stroke={isStar ? 'none' : color}
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'block', flex: 'none', ...style }}
      dangerouslySetInnerHTML={{ __html: inner }}
    />
  );
}

Object.assign(window, { Icon, CH_ICON_PATHS });