// Icons.jsx — shared inline SVG icon set for the UI kit.
// Stroke 1.8px, rounded caps, no fills (the brand convention).
// Filled magenta circles are reserved for `Play` and `Check`.

const Icon = ({ name, size = 22, color = "currentColor", strokeWidth = 1.8, ...rest }) => {
  const props = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: color,
    strokeWidth,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    ...rest,
  };
  switch (name) {
    case "search":
      return <svg {...props}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" /></svg>;
    case "whatsapp":
      return <svg {...props}><path d="M20.5 12a8.5 8.5 0 1 1-15.6 4.7L3 21l4.4-1.8A8.5 8.5 0 0 0 20.5 12z" /></svg>;
    case "user":
      return <svg {...props}><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-7 8-7s8 3 8 7" /></svg>;
    case "login":
      return <svg {...props}><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" /><path d="M10 17l5-5-5-5" /><path d="M15 12H3" /></svg>;
    case "bag":
      return <svg {...props}><path d="M6 7h12l-1 12H7L6 7z" /><path d="M9 7V5a3 3 0 0 1 6 0v2" /></svg>;
    case "arrow":
      return <svg {...props}><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></svg>;
    case "chevron":
      return <svg {...props}><polyline points="6 9 12 15 18 9" /></svg>;
    case "chevron-left":
      return <svg {...props}><polyline points="15 6 9 12 15 18" /></svg>;
    case "chevron-right":
      return <svg {...props}><polyline points="9 6 15 12 9 18" /></svg>;
    case "mail":
      return <svg {...props}><rect x="3" y="4" width="18" height="16" rx="2" /><polyline points="3 8 12 13 21 8" /></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-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.8 2.3z" /></svg>;
    case "pin":
      return <svg {...props}><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z" /><circle cx="12" cy="10" r="3" /></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="2" y="2" width="20" height="20" rx="5" /><path d="M16 11.4A4 4 0 1 1 12.6 8" /><line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg>;
    case "youtube":
      return <svg {...props}><path d="M22.5 6.5a3 3 0 0 0-2-2C18.7 4 12 4 12 4s-6.7 0-8.5.5a3 3 0 0 0-2 2A31 31 0 0 0 1 12a31 31 0 0 0 .5 5.5 3 3 0 0 0 2 2C5.3 20 12 20 12 20s6.7 0 8.5-.5a3 3 0 0 0 2-2 31 31 0 0 0 .5-5.5 31 31 0 0 0-.5-5.5z" /><polygon points="10 8.5 16 12 10 15.5" fill="currentColor" stroke="none" /></svg>;
    case "linkedin":
      return <svg {...props}><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" /><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" /></svg>;
    case "play":
      return <svg width={size} height={size} viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#EE077D" /><polygon points="10,8 17,12 10,16" fill="#FFFFFF" /></svg>;
    case "play-lg":
      return <svg width={size} height={size} viewBox="0 0 64 64"><circle cx="32" cy="32" r="30" fill="#EE077D" /><polygon points="27,21 46,32 27,43" fill="#FFFFFF" /></svg>;
    case "check":
      return <svg width={size} height={size} viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#EE077D" /><polyline points="7 12 11 16 17 8" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>;
    case "quote-left":
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="#EE077D"><path d="M6 6h6v6H8c0 3 1 5 4 5v2c-5 0-6-4-6-9V6zm10 0h6v6h-4c0 3 1 5 4 5v2c-5 0-6-4-6-9V6z" /></svg>;
    default:
      return null;
  }
};

window.Icon = Icon;