// icons.jsx — tiny icon set, 24×24 viewBox

const Icon = ({ children, size = 22, sw = 1.5, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
       style={style}>{children}</svg>
);

const FilledIcon = ({ children, size = 22, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"
       stroke="none" style={style}>{children}</svg>
);

const I = {
  leaf: (p) => (<Icon sw={1.8} {...p}>
    <path d="M4.7 19.2C5.1 10.4 10.6 5.4 19.7 4.3 18.8 13.2 13.6 18.8 4.7 19.2Z"/>
    <path d="M5.1 18.8c3.7-4.6 7.6-7.7 12.1-9.8"/>
  </Icon>),
  paw: (p) => (<Icon {...p}>
    <ellipse cx="6.5" cy="11" rx="1.7" ry="2.2"/>
    <ellipse cx="17.5" cy="11" rx="1.7" ry="2.2"/>
    <ellipse cx="9.5" cy="6" rx="1.5" ry="2"/>
    <ellipse cx="14.5" cy="6" rx="1.5" ry="2"/>
    <path d="M12 13c-3 0-5.5 2-5.5 4.5C6.5 19 8 20 9.5 19c.8-.5 1.5-.8 2.5-.8s1.7.3 2.5.8c1.5 1 3-.2 3-2.3 0-2.5-2.5-4.7-5.5-4.7z"/>
  </Icon>),
  drop: (p) => (<Icon {...p}>
    <path d="M12 3c-3.5 5-6 8-6 11.5A6 6 0 0012 20a6 6 0 006-5.5C18 11 15.5 8 12 3z"/>
  </Icon>),
  spray: (p) => (<Icon {...p}>
    <rect x="9" y="9" width="6" height="11" rx="1.2"/>
    <path d="M11 9V6h4l1 3"/>
    <path d="M18 4l2-1M19 7l2 .5M18 10l2 1.5"/>
  </Icon>),
  bowl: (p) => (<Icon {...p}>
    <path d="M3 11h18l-1.5 6a3 3 0 01-3 2H7.5a3 3 0 01-3-2z"/>
    <path d="M8 8c0-2 1.5-3 2-2s0 2 1 2 1.5-1 2-1.5"/>
  </Icon>),
  forkKnife: (p) => (<Icon sw={1.75} {...p}>
    <path d="M6.2 3.7v6.1M8.5 3.7v6.1M10.8 3.7v6.1"/>
    <path d="M5.6 10h5.8c0 1.6-1.1 2.9-2.7 3.2v7.1"/>
    <path d="M16.5 3.8v16.5"/>
    <path d="M16.6 3.8c2.3 1.9 3.2 5.3 1 8.1-.3.4-.7.7-1.1.9"/>
  </Icon>),
  walk: (p) => (<Icon {...p}>
    <circle cx="13" cy="4.5" r="1.6"/>
    <path d="M9 21l2-5-2-3 3-4 3 3 2 1"/>
    <path d="M14 13l-1 4 2 4"/>
  </Icon>),
  heart: (p) => (<Icon {...p}>
    <path d="M12 20s-7-4.5-7-10a4 4 0 017-2.5A4 4 0 0119 10c0 5.5-7 10-7 10z"/>
  </Icon>),
  sun: (p) => (<Icon sw={1.85} {...p}>
    <circle cx="12" cy="12" r="3.2"/>
    <path d="M12 2.9v2.3M12 18.8v2.3M2.9 12h2.3M18.8 12h2.3"/>
    <path d="M5.6 5.6l1.6 1.6M16.8 16.8l1.6 1.6M5.6 18.4l1.6-1.6M16.8 7.2l1.6-1.6"/>
  </Icon>),
  cloud: (p) => (<Icon {...p}>
    <path d="M7 16h11a3.5 3.5 0 100-7 5 5 0 00-9.5 1A3.5 3.5 0 007 16z"/>
  </Icon>),
  moon: (p) => (<Icon {...p}>
    <path d="M20 14.5A8 8 0 119.5 4a6.5 6.5 0 0010.5 10.5z"/>
  </Icon>),
  plus: (p) => (<Icon {...p}><path d="M12 4.55v14.9M4.55 12h14.9"/></Icon>),
  cal: (p) => (<Icon {...p}>
    <rect x="3.5" y="5" width="17" height="15" rx="2.5"/>
    <path d="M3.5 10h17M8 3v4M16 3v4"/>
  </Icon>),
  home: (p) => (<Icon {...p}>
    <path d="M4 11l8-7 8 7v8a1 1 0 01-1 1h-4v-6h-6v6H5a1 1 0 01-1-1z"/>
  </Icon>),
  shop: (p) => (<Icon {...p}>
    <path d="M5 8h14l-1.2 10a2 2 0 01-2 1.8H8.2a2 2 0 01-2-1.8z"/>
    <path d="M9 8V6a3 3 0 016 0v2"/>
  </Icon>),
  user: (p) => (<Icon sw={1.8} {...p}>
    <circle cx="12" cy="8.5" r="3.1"/>
    <path d="M5.4 20.2c1.2-3.8 3.5-5.7 6.6-5.7s5.4 1.9 6.6 5.7"/>
  </Icon>),
  globe: (p) => (<Icon {...p}>
    <circle cx="12" cy="12" r="8.5"/>
    <path d="M3.8 12h16.4M12 3.5c2.15 2.1 3.2 4.95 3.2 8.5S14.15 18.4 12 20.5C9.85 18.4 8.8 15.55 8.8 12S9.85 5.6 12 3.5z"/>
  </Icon>),
  text: (p) => (<Icon {...p}>
    <path d="M5 6h14M12 6v12M8.5 18h7"/>
    <path d="M7 10.5h10"/>
  </Icon>),
  crossCase: (p) => (<Icon {...p}>
    <rect x="4" y="7" width="16" height="12" rx="2.2"/>
    <path d="M9 7V5.6A1.6 1.6 0 0110.6 4h2.8A1.6 1.6 0 0115 5.6V7"/>
    <path d="M12 10.2v5.6M9.2 13h5.6"/>
  </Icon>),
  info: (p) => (<Icon {...p}>
    <circle cx="12" cy="12" r="8.5"/>
    <path d="M12 10.8v5.2"/>
    <circle cx="12" cy="7.7" r=".7" fill="currentColor" stroke="none"/>
  </Icon>),
  warning: (p) => (<Icon {...p}>
    <path d="M10.55 4.8L2.85 18.1a1.6 1.6 0 001.38 2.4h15.54a1.6 1.6 0 001.38-2.4L13.45 4.8a1.66 1.66 0 00-2.9 0z"/>
    <path d="M12 9.2v4.5"/>
    <path d="M12 17h.01"/>
  </Icon>),
  warningOctagon: (p) => (<Icon {...p}>
    <path d="M8.25 3.25h7.5l5 5v7.5l-5 5h-7.5l-5-5v-7.5z"/>
    <path d="M12 7.8v5.5"/>
    <path d="M12 16.9h.01"/>
  </Icon>),
  undo: (p) => (<Icon {...p}>
    <path d="M8.5 7.5H5.2V4.2"/>
    <path d="M5.5 7.3a7.2 7.2 0 111.85 7.45"/>
  </Icon>),
  stack: (p) => (<Icon {...p}>
    <rect x="5" y="5" width="14" height="10" rx="2"/>
    <path d="M7 18h10M8 21h8"/>
  </Icon>),
  back: (p) => (<Icon {...p}><path d="M14 6l-6 6 6 6"/></Icon>),
  more: (p) => (<Icon {...p}>
    <circle cx="6" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="18" cy="12" r="1.2"/>
  </Icon>),
  check: (p) => (<Icon {...p}><path d="M5 12.5l4.5 4.5L19 7"/></Icon>),
  scale: (p) => (<Icon {...p}>
    <path d="M5 8h14l-3 8H8z"/><path d="M12 8v-3M9 5h6"/>
  </Icon>),
  smile: (p) => (<Icon {...p}>
    <circle cx="12" cy="12" r="9"/>
    <path d="M8.5 14c1 1.5 2.2 2.2 3.5 2.2s2.5-.7 3.5-2.2"/>
    <circle cx="9" cy="10" r=".6" fill="currentColor"/><circle cx="15" cy="10" r=".6" fill="currentColor"/>
  </Icon>),
  camera: (p) => (<Icon {...p}>
    <rect x="3" y="7" width="18" height="13" rx="2"/>
    <circle cx="12" cy="13.5" r="3.5"/><path d="M8 7l1.5-2h5L16 7"/>
  </Icon>),
  bell: (p) => (<Icon {...p}>
    <path d="M5.5 17l1-2V11a5.5 5.5 0 0111 0v4l1 2z"/><path d="M10 20a2 2 0 004 0"/>
  </Icon>),
  share: (p) => (<Icon {...p}>
    <circle cx="6" cy="12" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="18" cy="18" r="2"/>
    <path d="M8 11l8-4M8 13l8 4"/>
  </Icon>),
  thermo: (p) => (<Icon {...p}>
    <path d="M10 4a2 2 0 014 0v10a3.5 3.5 0 11-4 0z"/><circle cx="12" cy="17" r="1.2" fill="currentColor"/>
  </Icon>),
  // task-kind icons
  kind: {
    walk:  (p) => I.walk(p),
    feed:  (p) => I.bowl(p),
    mist:  (p) => I.spray(p),
    water: (p) => I.drop(p),
    love:  (p) => I.heart(p),
  },
};

window.I = I;
