/* global React */
(function(){

/* =============================================================
   Icons.jsx — Telegram-inspired line icon set
   --------------------------------------------------------------
   24x24 viewBox, currentColor stroke, 1.8 round-cap round-join.
   Visually close to Telegram's outline icons (clean geometry,
   open counters, slight optical curve). Material-icons API
   compatible — drop in <Icon name="home" size={20} />.
   ============================================================= */

const ICONS = {
  // ---- Bottom-nav / global
  home:        <path d="M3.5 11.2 12 4l8.5 7.2v8.3a1.2 1.2 0 0 1-1.2 1.2h-3.7v-6.4h-7.2v6.4H4.7a1.2 1.2 0 0 1-1.2-1.2v-8.3z"/>,
  feed:        <g><rect x="3.5" y="3.5" width="7" height="7" rx="1.6"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.6"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.6"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.6"/></g>,
  reward:      <g><path d="M7 4h10v3a5 5 0 0 1-10 0V4z"/><path d="M7 6H4.5a2 2 0 0 0 4 3.5"/><path d="M17 6h2.5a2 2 0 0 1-4 3.5"/><path d="M9 14h6"/><path d="M10 20h4"/><path d="M12 14v6"/></g>,
  profile:     <g><circle cx="12" cy="8.5" r="3.5"/><path d="M5 20.5c.6-3.6 3.4-6 7-6s6.4 2.4 7 6"/></g>,
  search:      <g><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.3-4.3"/></g>,
  bell:        <g><path d="M6 9.5a6 6 0 1 1 12 0V14l1.5 2.5h-15L6 14V9.5z"/><path d="M10 19.5a2 2 0 0 0 4 0"/></g>,
  plus:        <g><path d="M12 5v14"/><path d="M5 12h14"/></g>,
  back:        <g><path d="m10 6 6 6-6 6"/></g>,
  close:       <g><path d="m6 6 12 12"/><path d="m18 6-12 12"/></g>,
  check:       <path d="m5 12.5 4.5 4.5L19 7.5"/>,
  chevron:     <path d="m9 6 6 6-6 6"/>,
  // ---- Content types
  video:       <g><rect x="3" y="6" width="13" height="12" rx="2.2"/><path d="m16 10 5-2.5v9L16 14"/></g>,
  image:       <g><rect x="3.5" y="4.5" width="17" height="15" rx="2.2"/><circle cx="9" cy="10" r="1.8"/><path d="m4 18 5-5 4 4 3-2 4 3"/></g>,
  audio:       <g><rect x="9" y="3" width="6" height="13" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></g>,
  text:        <g><path d="M5 6h14"/><path d="M5 12h14"/><path d="M5 18h9"/></g>,
  story:       <g><circle cx="12" cy="12" r="8.5" strokeDasharray="2 1.4"/><circle cx="12" cy="12" r="4.5"/></g>,
  question:    <g><circle cx="12" cy="12" r="8.5"/><path d="M9.2 9.2a2.9 2.9 0 0 1 4.2 2.5c0 1.5-2 1.8-2.4 2.9"/><circle cx="11" cy="17" r=".7" fill="currentColor" strokeWidth="0"/></g>,
  // ---- Bento concepts
  trending:    <g><path d="m3.5 16.5 5-5 4 3.5 7.5-8"/><path d="M14.5 7H20v5.5"/></g>,
  flame:       <path d="M12 3.5c.4 3 2.5 4 2.5 6.5a2.5 2.5 0 0 1-5 0c0-1 .5-1.6.5-2.5C7.5 9.5 6 12 6 14.5a6 6 0 1 0 12 0c0-4.5-3.5-7-6-11z"/>,
  trophy:      <g><path d="M8 4h8v4a4 4 0 0 1-8 0V4z"/><path d="M8 5.5H5a2.5 2.5 0 0 0 4.5 3"/><path d="M16 5.5h3a2.5 2.5 0 0 1-4.5 3"/><path d="M9 14h6"/><path d="M10.5 20h3"/><path d="M12 14v6"/></g>,
  target:      <g><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="1.2" strokeWidth="0" fill="currentColor"/></g>,
  controller:  <g><path d="M7 8h10a4 4 0 0 1 4 4v0a4 4 0 0 1-7 2.6L12 13l-2 1.6A4 4 0 0 1 3 12v0a4 4 0 0 1 4-4z"/><path d="M7.5 11v2"/><path d="M6.5 12h2"/><circle cx="16" cy="11.5" r=".7" fill="currentColor" strokeWidth="0"/><circle cx="17.5" cy="13" r=".7" fill="currentColor" strokeWidth="0"/></g>,
  microscope:  <g><path d="M7 17h10"/><path d="M9 15a4 4 0 0 0 6 0"/><path d="m11 13 5-5"/><rect x="14.5" y="3.5" width="4" height="6" rx="1.5" transform="rotate(45 16.5 6.5)"/></g>,
  swipe:       <g><path d="M12 4v10"/><path d="m8 8 4-4 4 4"/><path d="M5 14a7 7 0 0 0 14 0"/></g>,
  // ---- Actions
  heart:       <path d="M12 19.5s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 9.5c0 5.6-7 10-7 10z"/>,
  bookmark:    <path d="M6.5 4.5h11v15.5l-5.5-3.5-5.5 3.5z"/>,
  share:       <g><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.2 10.7 7.6-3.4"/><path d="m8.2 13.3 7.6 3.4"/></g>,
  comment:     <path d="M5 4.5h14a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5H10l-4 3.5V16.5H5a1.5 1.5 0 0 1-1.5-1.5V6A1.5 1.5 0 0 1 5 4.5z"/>,
  star:        <path d="m12 3.5 2.7 5.6 6 .9-4.4 4.2 1.1 6L12 17.4l-5.4 2.8 1.1-6L3.3 10l6-.9z"/>,
  send:        <path d="m4 12 17-8-8 17-2.5-6.5z"/>,
  upload:      <g><path d="M12 4v12"/><path d="m7 9 5-5 5 5"/><path d="M5 18.5h14"/></g>,
  filter:      <g><path d="M4 5.5h16"/><path d="M7 11.5h10"/><path d="M10 17.5h4"/></g>,
  more:        <g><circle cx="6" cy="12" r="1.4" fill="currentColor" strokeWidth="0"/><circle cx="12" cy="12" r="1.4" fill="currentColor" strokeWidth="0"/><circle cx="18" cy="12" r="1.4" fill="currentColor" strokeWidth="0"/></g>,
  // ---- Reward landing
  city:        <g><path d="M3.5 20h17"/><path d="M5 20V8l4-2v14"/><path d="M9 20V4l6 2v14"/><path d="M15 20v-8l4 2v6"/><path d="M7 12h0"/><path d="M11 9h0"/><path d="M11 13h0"/><path d="M11 17h0"/></g>,
  tv:          <g><rect x="3.5" y="6.5" width="17" height="11" rx="1.6"/><path d="m8 3.5 4 3 4-3"/></g>,
  film:        <g><rect x="3.5" y="3.5" width="17" height="17" rx="1.8"/><path d="M3.5 8h17"/><path d="M3.5 16h17"/><path d="M8 3.5v17"/><path d="M16 3.5v17"/></g>,
  megaphone:   <g><path d="M5 14V10l11-4.5v13L5 14z"/><path d="M5 14H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1"/><path d="M8 14v3a2 2 0 0 0 4 0"/></g>,
  carnival:    <g><path d="m4 19 8-13 8 13z"/><path d="M4 19h16"/><path d="M9 19v-4"/><path d="M15 19v-4"/></g>,
};

window.Icon = function Icon({ name, size = 20, stroke = 1.8, style, className = "" }) {
  const path = ICONS[name];
  if (!path) return <span style={{ display: "inline-block", width: size, height: size, ...style }} />;
  return (
    <svg
      className={`kd-icon ${className}`}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{ flexShrink: 0, ...style }}
      aria-hidden="true"
    >
      {path}
    </svg>
  );
};
})();