// Dietello icons — unified SVG icon set, line-based, currentColor-friendly.
//
// Usage: <Icon name="diary" size={20} stroke={2} />
// Most icons inherit color via currentColor for stroke or fill.

const ICONS = {
  // ── Tab bar
  diary: { v: 24, c: <>
    <path d="M6 3h12a2 2 0 012 2v15.5a1 1 0 01-1.5.87L17 19.5l-2 1-2-1-2 1-2-1-2 1L5 19.5V5a2 2 0 012-2z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/>
    <path d="M9 8h6M9 12h4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
  </> },
  stats: { v: 24, c: <>
    <path d="M4 20V11M12 20V4M20 20v-9" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
    <circle cx="12" cy="4" r="2.4" fill="currentColor"/>
  </> },
  chat: { v: 24, c: <>
    <path d="M4 5.5C4 4.7 4.7 4 5.5 4h13a1.5 1.5 0 011.5 1.5v9.5a1.5 1.5 0 01-1.5 1.5H9l-4 4v-4H5.5A1.5 1.5 0 014 15V5.5z"
      stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
    <circle cx="9" cy="10" r="1" fill="currentColor"/>
    <circle cx="12" cy="10" r="1" fill="currentColor"/>
    <circle cx="15" cy="10" r="1" fill="currentColor"/>
  </> },
  trophy: { v: 24, c: <>
    <path d="M8 4h8v6a4 4 0 11-8 0V4zM8 5H5v2a3 3 0 003 3M16 5h3v2a3 3 0 01-3 3M10 15h4M9 19h6M12 15v4"
      stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
  </> },
  settings: { v: 24, c: <>
    <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <path d="M12 2v2M12 20v2M3 12h2M19 12h2M5.2 5.2l1.5 1.5M17.3 17.3l1.5 1.5M5.2 18.8l1.5-1.5M17.3 6.7l1.5-1.5"
      stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
  </> },

  // ── Meal types (used for meal cards)
  breakfast: { v: 24, c: <>
    {/* sun rising */}
    <circle cx="12" cy="13" r="4" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <path d="M12 3v2M4 13H2M22 13h-2M5.5 6.5l1.5 1.5M17 8l1.5-1.5M2 19h20" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
  </> },
  lunch: { v: 24, c: <>
    {/* plate with fork & knife */}
    <circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <circle cx="12" cy="12" r="3.5" stroke="currentColor" strokeWidth="1.5" fill="none"/>
  </> },
  snack: { v: 24, c: <>
    {/* apple */}
    <path d="M12 7c-1 0-1.8.4-2.5.9-1.2-1-3.5-1-4.5.8-1.2 2 .2 6 3.5 8 1 .6 1.8 1 2.5 1s1.5-.4 2.5-1c3.3-2 4.7-6 3.5-8-1-1.8-3.3-1.8-4.5-.8C13.8 7.4 13 7 12 7z"
      stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
    <path d="M12 7c0-1.5 1-3 3-3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
  </> },
  dinner: { v: 24, c: <>
    {/* moon */}
    <path d="M19 14.5A8 8 0 119.5 5a6.5 6.5 0 009.5 9.5z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
  </> },

  // ── Food items (inside meal cards)
  bowl: { v: 24, c: <>
    <path d="M3 11h18a9 9 0 01-18 0z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
    <path d="M7 7c0-1 1-2 2-2M11 5c0-1 1-2 2-2M15 7c0-1 1-2 2-2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
  </> },
  coffee: { v: 24, c: <>
    <path d="M5 7h12v6a5 5 0 01-10 0V7H5z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
    <path d="M17 9h2a2 2 0 010 4h-2M9 3c.5 1-.5 2 0 3M13 3c.5 1-.5 2 0 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
  </> },
  chicken: { v: 24, c: <>
    {/* drumstick */}
    <path d="M14.5 4.5a4 4 0 014.5 4.5 4 4 0 01-3 4l-1.5 1.5-3-3 1.5-1.5a4 4 0 011.5-5.5z"
      stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
    <path d="M11.5 11.5l-6 6a2 2 0 01-3-3l6-6" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
  </> },
  leaf: { v: 24, c: <>
    <path d="M20 4C10 4 4 10 4 20c6 0 12-2 14-8M4 20l8-8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
  </> },
  bread: { v: 24, c: <>
    <path d="M5 9c0-2.8 3.1-5 7-5s7 2.2 7 5c0 1.5-.8 2.5-2 3v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-6c-1.2-.5-2-1.5-2-3z"
      stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
    <path d="M10 12v2M14 12v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
  </> },
  nuts: { v: 24, c: <>
    <ellipse cx="9" cy="13" rx="4" ry="6" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <ellipse cx="15" cy="11" rx="3.5" ry="5" stroke="currentColor" strokeWidth="1.8" fill="none"/>
  </> },
  egg: { v: 24, c: <>
    <path d="M12 3c-4 0-7 6-7 11a7 7 0 0014 0c0-5-3-11-7-11z" stroke="currentColor" strokeWidth="1.8" fill="none"/>
  </> },
  salad: { v: 24, c: <>
    <path d="M4 12h16a8 8 0 01-16 0z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
    <path d="M7 10c0-2 2-3 3-2M12 9c0-2 2-3 3-2M16 11c0-2 1-3 2-3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
  </> },

  // ── UI / actions
  plus: { v: 24, c: <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/> },
  check: { v: 24, c: <path d="M5 12l5 5L19 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
  x: { v: 24, c: <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/> },
  chevronRight: { v: 24, c: <path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
  chevronDown: { v: 24, c: <path d="M5 9l7 7 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
  chevronLeft: { v: 24, c: <path d="M15 5l-7 7 7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
  arrowRight: { v: 24, c: <path d="M4 12h16M14 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
  arrowUp: { v: 24, c: <path d="M12 19V5M6 11l6-6 6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
  arrowDown: { v: 24, c: <path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
  edit: { v: 24, c: <path d="M16 3l5 5-12 12H4v-5L16 3z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/> },
  camera: { v: 24, c: <>
    <path d="M3 8c0-1 .8-2 2-2h2l2-2h6l2 2h2c1.2 0 2 1 2 2v9c0 1-.8 2-2 2H5c-1.2 0-2-1-2-2V8z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
    <circle cx="12" cy="12.5" r="3.5" stroke="currentColor" strokeWidth="1.8" fill="none"/>
  </> },
  mic: { v: 24, c: <>
    <rect x="9" y="3" width="6" height="12" rx="3" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <path d="M5 11a7 7 0 0014 0M12 18v3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
  </> },
  send: { v: 24, c: <path d="M3 12l18-8-7 18-3-8-8-2z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/> },
  calendar: { v: 24, c: <>
    <rect x="3" y="5" width="18" height="16" rx="3" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <path d="M3 10h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
  </> },
  search: { v: 24, c: <>
    <circle cx="11" cy="11" r="6" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <path d="M16 16l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
  </> },

  // ── Brand / accents
  sparkle: { v: 24, c: <path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z" stroke="currentColor" strokeWidth="1.4" fill="currentColor" strokeLinejoin="round"/> },
  flame: { v: 24, c: <path d="M12 3c1 4 5 5 5 10a5 5 0 11-10 0c0-2 1-3 2-4-1 0-1-2 0-3 .5 0 1 1 1 2 1-1 1-3 2-5z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/> },
  star: { v: 24, c: <path d="M12 3l2.5 6 6.5.5-5 4.5L17.5 21 12 17.5 6.5 21 8 14l-5-4.5L9.5 9 12 3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" fill="none"/> },
  heart: { v: 24, c: <path d="M12 20s-7-4.5-7-10a4 4 0 017-2.5A4 4 0 0119 10c0 5.5-7 10-7 10z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/> },
  brain: { v: 24, c: <>
    <path d="M9 4a3 3 0 00-3 3v1a3 3 0 00-2 3 3 3 0 002 3v1a3 3 0 003 3h1V4H9zM15 4a3 3 0 013 3v1a3 3 0 012 3 3 3 0 01-2 3v1a3 3 0 01-3 3h-1V4h1z"
      stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" fill="none"/>
    <path d="M9 8h2M9 12h2M9 16h2M13 8h2M13 12h2M13 16h2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
  </> },
  bell: { v: 24, c: <>
    <path d="M5 17l-.5 1c-.5 1 .2 2 1.3 2h12.4c1.1 0 1.8-1 1.3-2L19 17V11a7 7 0 10-14 0v6z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
    <path d="M10 21a2 2 0 004 0" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
  </> },
  growth: { v: 24, c: <>
    <path d="M4 19l5-7 4 4 7-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    <path d="M15 7h5v5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
  </> },
  target: { v: 24, c: <>
    <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <circle cx="12" cy="12" r="5.5" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <circle cx="12" cy="12" r="2" fill="currentColor"/>
  </> },
  scales: { v: 24, c: <>
    <path d="M5 7h14M12 4v3M7 20h10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    <path d="M5 7l-2 5a4 4 0 008 0L9 7M19 7l-2 5a4 4 0 008 0L23 7" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" fill="none"/>
    <path d="M12 7v13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
  </> },
  user: { v: 24, c: <>
    <circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
  </> },
  globe: { v: 24, c: <>
    <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" stroke="currentColor" strokeWidth="1.6" fill="none"/>
  </> },
  doc: { v: 24, c: <>
    <path d="M6 3h9l4 4v14a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="none"/>
    <path d="M14 3v5h5M8 13h8M8 17h6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
  </> },
  lock: { v: 24, c: <>
    <rect x="4" y="10" width="16" height="11" rx="2" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <path d="M8 10V7a4 4 0 018 0v3" stroke="currentColor" strokeWidth="1.8" fill="none"/>
  </> },
  medal: { v: 24, c: <>
    <circle cx="12" cy="14" r="6" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    <path d="M8 11L6 3h12l-2 8M10 14l1.5 1.5L15 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
  </> },
};

function Icon({ name, size = 20, style, color }) {
  const def = ICONS[name];
  if (!def) return null;
  return (
    <svg
      width={size} height={size}
      viewBox={`0 0 ${def.v} ${def.v}`}
      style={{ display: 'inline-block', flexShrink: 0, color: color || 'currentColor', ...style }}
    >
      {def.c}
    </svg>
  );
}

// Coloured tile housing an icon — for meal items / feature rows / settings rows
function IconTile({ name, size = 40, bg, color = 'currentColor', radius = 12, iconSize, style }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: radius,
      background: bg, color,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
      ...style,
    }}>
      <Icon name={name} size={iconSize || size * 0.55} />
    </div>
  );
}

Object.assign(window, { Icon, IconTile, ICONS });
