// icons.jsx — line-icon set for the app. 24px viewBox, currentColor.

const I = ({ d, children, size = 20, stroke = 1.6 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {children || <path d={d} />}
  </svg>
);

// Mode icons
const IconT2I = (p) => (
  <I {...p}>
    <path d="M4 7h16" /><path d="M9 7v13" /><path d="M15 7v13" />
    <path d="M4 4h16" />
  </I>
);
const IconI2I = (p) => (
  <I {...p}>
    <rect x="3" y="5" width="8" height="14" rx="1.5" />
    <rect x="13" y="5" width="8" height="14" rx="1.5" />
    <path d="M11 12h2" />
  </I>
);
const IconInpaint = (p) => (
  <I {...p}>
    <rect x="3" y="3" width="18" height="18" rx="2" />
    <path d="M8 14l3-3 2 2 4-4" />
    <circle cx="17" cy="7" r="1.5" />
  </I>
);
const IconOutpaint = (p) => (
  <I {...p}>
    <rect x="7" y="7" width="10" height="10" rx="1" />
    <path d="M3 3h3M3 3v3" /><path d="M21 3h-3M21 3v3" />
    <path d="M3 21h3M3 21v-3" /><path d="M21 21h-3M21 21v-3" />
  </I>
);
const IconVariations = (p) => (
  <I {...p}>
    <rect x="3" y="3" width="8" height="8" rx="1.5" />
    <rect x="13" y="3" width="8" height="8" rx="1.5" />
    <rect x="3" y="13" width="8" height="8" rx="1.5" />
    <rect x="13" y="13" width="8" height="8" rx="1.5" />
  </I>
);
const IconSketch = (p) => (
  <I {...p}>
    <path d="M3 21l3-1 11.5-11.5a2.12 2.12 0 0 0-3-3L3 17v4z" />
    <path d="M14.5 6.5l3 3" />
  </I>
);

// UI icons
const IconSend = (p) => (
  <I {...p}><path d="M5 12l14-7-4 16-3-7-7-2z" /></I>
);
const IconSparkle = (p) => (
  <I {...p}>
    <path d="M12 3l1.6 4.6L18 9l-4.4 1.4L12 15l-1.6-4.6L6 9l4.4-1.4L12 3z" />
    <path d="M19 16l.7 2 2 .7-2 .7L19 22l-.7-2-2-.7 2-.7L19 16z" />
  </I>
);
const IconClock = (p) => (
  <I {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></I>
);
const IconHeart = (p) => (
  <I {...p}>
    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21l8.84-8.61a5.5 5.5 0 0 0 0-7.78z" />
  </I>
);
const IconHeartFill = (p) => (
  <svg width={p.size || 20} height={p.size || 20} viewBox="0 0 24 24"
       fill="currentColor" aria-hidden="true">
    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21l8.84-8.61a5.5 5.5 0 0 0 0-7.78z" />
  </svg>
);
const IconDownload = (p) => (
  <I {...p}><path d="M12 4v12" /><path d="M7 11l5 5 5-5" /><path d="M5 21h14" /></I>
);
const IconCopy = (p) => (
  <I {...p}>
    <rect x="9" y="9" width="11" height="11" rx="2" />
    <path d="M5 15V5a2 2 0 0 1 2-2h10" />
  </I>
);
const IconShare = (p) => (
  <I {...p}>
    <path d="M12 3v12" /><path d="M7 8l5-5 5 5" />
    <path d="M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5" />
  </I>
);
const IconClose = (p) => (
  <I {...p}><path d="M6 6l12 12M18 6L6 18" /></I>
);
const IconSettings = (p) => (
  <I {...p}>
    <circle cx="12" cy="12" r="3" />
    <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8L4.2 7a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5h0a1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" />
  </I>
);
const IconSun = (p) => (
  <I {...p}>
    <circle cx="12" cy="12" r="4" />
    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
  </I>
);
const IconMoon = (p) => (
  <I {...p}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" /></I>
);
const IconPlus = (p) => (
  <I {...p}><path d="M12 5v14M5 12h14" /></I>
);
const IconImage = (p) => (
  <I {...p}>
    <rect x="3" y="3" width="18" height="18" rx="2" />
    <circle cx="9" cy="9" r="2" />
    <path d="M21 15l-5-5L5 21" />
  </I>
);
const IconUndo = (p) => (
  <I {...p}>
    <path d="M9 14L4 9l5-5" />
    <path d="M4 9h11a5 5 0 0 1 0 10h-4" />
  </I>
);
const IconRedo = (p) => (
  <I {...p}>
    <path d="M15 14l5-5-5-5" />
    <path d="M20 9H9a5 5 0 0 0 0 10h4" />
  </I>
);
const IconBrush = (p) => (
  <I {...p}>
    <path d="M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.07" />
    <path d="M7.07 14.94c-1.66 0-3 1.34-3 3 0 1.66-1.34 3-3 3 1.34 0 3-1.34 3-3a3 3 0 0 1 3-3z" />
  </I>
);
const IconEraser = (p) => (
  <I {...p}>
    <path d="M18 13l-6-6L4 15a2 2 0 0 0 0 3l3 3h8" />
    <path d="M18 13l3-3a2 2 0 0 0 0-3l-3-3" /><path d="M10 21h10" />
  </I>
);
const IconChevron = (p) => (
  <I {...p}><path d="M6 9l6 6 6-6" /></I>
);
const IconArrow = (p) => (
  <I {...p}><path d="M5 12h14M13 5l7 7-7 7" /></I>
);
const IconDice = (p) => (
  <I {...p}>
    <rect x="3" y="3" width="18" height="18" rx="3" />
    <circle cx="8" cy="8" r="1" fill="currentColor" />
    <circle cx="16" cy="8" r="1" fill="currentColor" />
    <circle cx="12" cy="12" r="1" fill="currentColor" />
    <circle cx="8" cy="16" r="1" fill="currentColor" />
    <circle cx="16" cy="16" r="1" fill="currentColor" />
  </I>
);
const IconUpload = (p) => (
  <I {...p}>
    <path d="M12 16V4" /><path d="M7 9l5-5 5 5" />
    <path d="M5 16v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3" />
  </I>
);
const IconCheck = (p) => (
  <I {...p}><path d="M5 12l5 5L20 7" /></I>
);
const IconStop = (p) => (
  <I {...p}><rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor" stroke="none" /></I>
);

Object.assign(window, {
  IconT2I, IconI2I, IconInpaint, IconOutpaint, IconVariations, IconSketch,
  IconSend, IconSparkle, IconClock, IconHeart, IconHeartFill, IconDownload,
  IconCopy, IconShare, IconClose, IconSettings, IconSun, IconMoon, IconPlus,
  IconImage, IconUndo, IconRedo, IconBrush, IconEraser, IconChevron, IconArrow,
  IconDice, IconUpload, IconCheck, IconStop,
});