// icons.jsx — Lucide-style thin line icons.
// Exposes window.VFIcons.

const Icon = ({ children, size = 22, stroke = 1.6, className, style }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    style={style}
  >
    {children}
  </svg>
);

const SearchIcon = (p) => (
  <Icon {...p}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></Icon>
);
const ChartIcon = (p) => (
  <Icon {...p}><path d="M3 3v18h18" /><path d="M7 14l3-4 3 2 5-7" /></Icon>
);
const CheckIcon = (p) => (
  <Icon {...p}><path d="M20 6 9 17l-5-5" /></Icon>
);
const ArrowRight = (p) => (
  <Icon {...p}><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></Icon>
);
const ArrowLeft = (p) => (
  <Icon {...p}><path d="M19 12H5" /><path d="m11 6-6 6 6 6" /></Icon>
);
const ChevronDown = (p) => (
  <Icon {...p}><path d="m6 9 6 6 6-6" /></Icon>
);
const Sparkles = (p) => (
  <Icon {...p}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" /></Icon>
);
const MessageIcon = (p) => (
  <Icon {...p}><path d="M21 12a8 8 0 0 1-11.6 7.2L4 21l1.8-5.4A8 8 0 1 1 21 12Z" /></Icon>
);
const UsersIcon = (p) => (
  <Icon {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></Icon>
);
const TrendIcon = (p) => (
  <Icon {...p}><path d="m3 17 6-6 4 4 8-8" /><path d="M14 7h7v7" /></Icon>
);
const PulseIcon = (p) => (
  <Icon {...p}><path d="M3 12h4l3-8 4 16 3-8h4" /></Icon>
);
const DownloadIcon = (p) => (
  <Icon {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="m7 10 5 5 5-5" /><path d="M12 15V3" /></Icon>
);
const CompareIcon = (p) => (
  <Icon {...p}><path d="M16 3h5v5" /><path d="M8 21H3v-5" /><path d="m21 3-7 7" /><path d="m3 21 7-7" /></Icon>
);
const BookmarkIcon = (p) => (
  <Icon {...p}><path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" /></Icon>
);
const InstagramIcon = (p) => (
  <Icon {...p}><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r=".7" fill="currentColor" stroke="none" /></Icon>
);
const TikTokIcon = (p) => (
  <Icon {...p}><path d="M16 3v3a4 4 0 0 0 4 4" /><path d="M16 3v12a4 4 0 1 1-4-4" /></Icon>
);
const HeartIcon = (p) => (
  <Icon {...p}><path d="M20.84 4.6a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" /></Icon>
);
const FlagIcon = (p) => (
  <Icon {...p}><path d="M4 22V4M4 4h14l-3 5 3 5H4" /></Icon>
);

Object.assign(window, { Icon });
window.VFIcons = {
  Icon, SearchIcon, ChartIcon, CheckIcon, ArrowRight, ArrowLeft, ChevronDown,
  Sparkles, MessageIcon, UsersIcon, TrendIcon, PulseIcon, DownloadIcon,
  CompareIcon, BookmarkIcon, InstagramIcon, TikTokIcon, HeartIcon, FlagIcon,
};