// icons.jsx — small icon component (Lucide-style strokes)
// Usage: <Icon name="cart" />

const Icon = ({ name, size = 20, className = '', style }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor', strokeWidth: 1.6,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    className, style
  };
  switch (name) {
    case 'search':  return (<svg {...props}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>);
    case 'cart':    return (<svg {...props}><path d="M3 4h2l1.5 12.5a2 2 0 0 0 2 1.5h9a2 2 0 0 0 2-1.5L21 8H6"/><circle cx="9" cy="21" r="1.2"/><circle cx="18" cy="21" r="1.2"/></svg>);
    case 'heart':   return (<svg {...props}><path d="M20.8 5.6a5 5 0 0 0-7-.2L12 7l-1.8-1.6a5 5 0 0 0-7 7L12 21l8.8-8.6a5 5 0 0 0 0-6.8z"/></svg>);
    case 'user':    return (<svg {...props}><circle cx="12" cy="8" r="4"/><path d="M3 21a9 9 0 0 1 18 0"/></svg>);
    case 'menu':    return (<svg {...props}><path d="M3 6h18M3 12h18M3 18h18"/></svg>);
    case 'close':   return (<svg {...props}><path d="M18 6 6 18M6 6l12 12"/></svg>);
    case 'chev-down': return (<svg {...props}><path d="m6 9 6 6 6-6"/></svg>);
    case 'chev-up':   return (<svg {...props}><path d="m6 15 6-6 6 6"/></svg>);
    case 'chev-left': return (<svg {...props}><path d="m15 18-6-6 6-6"/></svg>);
    case 'chev-right':return (<svg {...props}><path d="m9 18 6-6-6-6"/></svg>);
    case 'plus':    return (<svg {...props}><path d="M12 5v14M5 12h14"/></svg>);
    case 'minus':   return (<svg {...props}><path d="M5 12h14"/></svg>);
    case 'check':   return (<svg {...props}><path d="M4 12.5 9.5 18 20 6"/></svg>);
    case 'star':    return (<svg {...props} fill="currentColor" stroke="none"><path d="m12 3 2.6 5.7 6.4.8-4.7 4.4 1.2 6.3L12 17l-5.5 3.2L7.7 14 3 9.5l6.4-.8L12 3z"/></svg>);
    case 'leaf':    return (<svg {...props}><path d="M5 19c8 0 14-6 14-14 0 0-4 1-7 4s-7 4-7 4v6z"/><path d="M5 19c2-4 6-7 10-9"/></svg>);
    case 'sun':     return (<svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4"/></svg>);
    case 'drop':    return (<svg {...props}><path d="M12 3s6 7 6 12a6 6 0 0 1-12 0c0-5 6-12 6-12z"/></svg>);
    case 'ruler':   return (<svg {...props}><path d="M3 17 17 3l4 4L7 21z"/><path d="M7 13l2 2M10 10l2 2M13 7l2 2"/></svg>);
    case 'truck':   return (<svg {...props}><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></svg>);
    case 'shield':  return (<svg {...props}><path d="M12 3l8 3v6c0 4.5-3.4 8.5-8 9-4.6-.5-8-4.5-8-9V6l8-3z"/></svg>);
    case 'refresh': return (<svg {...props}><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"/></svg>);
    case 'map':     return (<svg {...props}><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>);
    case 'phone':   return (<svg {...props}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.5a16 16 0 0 0 6 6l1.1-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></svg>);
    case 'mail':    return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>);
    case 'facebook':return (<svg {...props}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>);
    case 'instagram':return (<svg {...props}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8" fill="currentColor" stroke="none"/></svg>);
    case 'pinterest':return (<svg {...props}><circle cx="12" cy="12" r="10"/><path d="M11 8c0 2 .5 4-1 8M13 9c2 0 4 1 4 4s-2 4-4 3-2-4 0-5"/></svg>);
    case 'youtube':  return (<svg {...props}><rect x="3" y="6" width="18" height="12" rx="3"/><path d="m10 9 5 3-5 3z" fill="currentColor" stroke="none"/></svg>);
    case 'twitter':  return (<svg {...props}><path d="M22 5.8a8 8 0 0 1-2.4.7 4 4 0 0 0 1.8-2.2 8 8 0 0 1-2.6 1 4 4 0 0 0-6.8 3.6 11 11 0 0 1-8-4 4 4 0 0 0 1.2 5.4 4 4 0 0 1-1.8-.5v.1a4 4 0 0 0 3.2 4 4 4 0 0 1-1.8.1 4 4 0 0 0 3.7 2.8 8 8 0 0 1-5 1.7l-.9-.1A11 11 0 0 0 8 21c7.2 0 11-6 11-11v-.5A8 8 0 0 0 22 5.8z"/></svg>);
    case 'whatsapp': return (<svg {...props}><path d="M3 21l1.6-4.8A8.5 8.5 0 1 1 9 20.5L3 21z"/><path d="M8.5 9c.4 0 .7.4 1 1l.5 1c.1.3 0 .6-.2.8l-.4.4a5 5 0 0 0 2.4 2.4l.4-.4c.2-.2.5-.3.8-.2l1 .5c.6.3 1 .6 1 1 0 1.2-1 2-2 2-3 0-6-3-6-6 0-1 .8-2 2-2z"/></svg>);
    case 'arrow-right': return (<svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case 'arrow-up-right': return (<svg {...props}><path d="M7 17 17 7M8 7h9v9"/></svg>);
    case 'sliders': return (<svg {...props}><path d="M3 6h12M3 12h6M3 18h14"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="20" cy="18" r="2"/></svg>);
    case 'grid':    return (<svg {...props}><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"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>);
    case 'list':    return (<svg {...props}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>);
    case 'eye':     return (<svg {...props}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>);
    case 'lock':    return (<svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>);
    case 'package': return (<svg {...props}><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg>);
    case 'tag':     return (<svg {...props}><path d="M20 12V4h-8L4 12l8 8z"/><circle cx="15" cy="9" r="1.2"/></svg>);
    case 'spark':   return (<svg {...props}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6 8 8M16 16l2.4 2.4M5.6 18.4 8 16M16 8l2.4-2.4"/></svg>);
    case 'trash':   return (<svg {...props}><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M5 6l1 14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-14"/></svg>);
    case 'play':    return (<svg {...props} fill="currentColor" stroke="none"><path d="M7 5v14l11-7z"/></svg>);
    case 'home':    return (<svg {...props}><path d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z"/></svg>);
    case 'message': return (<svg {...props}><path d="M21 12a8 8 0 0 1-8 8H7l-4 3V12a8 8 0 0 1 16 0z"/></svg>);
    case 'bell':    return (<svg {...props}><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>);
    case 'box':     return (<svg {...props}><path d="M3 7.5 12 3l9 4.5v9L12 21 3 16.5z"/><path d="M12 12 21 7.5M12 12v9M12 12 3 7.5"/></svg>);
    case 'pin':     return (<svg {...props}><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>);
    case 'signal':  return (<svg {...props}><path d="M2 20h2M6 16h2M10 12h2M14 8h2M18 4h2"/></svg>);
    case 'wifi':    return (<svg {...props}><path d="M2 8.5a14 14 0 0 1 20 0M5 12a10 10 0 0 1 14 0M8.5 15.5a5 5 0 0 1 7 0M12 20h.01"/></svg>);
    case 'battery': return (<svg {...props}><rect x="2" y="7" width="18" height="10" rx="2"/><path d="M22 11v2"/><rect x="4" y="9" width="12" height="6" rx="1" fill="currentColor" stroke="none"/></svg>);
    case 'mic':     return (<svg {...props}><path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z"/><path d="M19 11a7 7 0 0 1-14 0M12 18v3"/></svg>);
    case 'apps':    return (<svg {...props}><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>);
    default: return null;
  }
};

window.Icon = Icon;