// Icon.jsx — minimal inline icon set (Lucide-style, 1.75 stroke, round caps)
// Using inline SVGs instead of an icon font so the kit has zero external deps.
function Icon({ name, size = 18, color = "currentColor", style }) {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round",
    style
  };
  switch (name) {
    case "home":       return <svg {...common}><path d="M3 11 12 4l9 7"/><path d="M5 10v10h14V10"/></svg>;
    case "feed":       return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 10h10M7 14h7"/></svg>;
    case "classroom":  return <svg {...common}><path d="M12 3 2 8l10 5 10-5-10-5Z"/><path d="M6 10v5c3 2 9 2 12 0v-5"/></svg>;
    case "chat":       return <svg {...common}><path d="M4 5h16v11H8l-4 4V5Z"/></svg>;
    case "calendar":   return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case "trophy":     return <svg {...common}><path d="M8 21h8M12 17v4M6 4h12v4a6 6 0 0 1-12 0V4Z"/><path d="M18 6h3v2a3 3 0 0 1-3 3M6 6H3v2a3 3 0 0 0 3 3"/></svg>;
    case "bell":       return <svg {...common}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>;
    case "search":     return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "plus":       return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "heart":      return <svg {...common}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10Z"/></svg>;
    case "comment":    return <svg {...common}><path d="M4 5h16v11H8l-4 4V5Z"/></svg>;
    case "share":      return <svg {...common}><path d="M4 12v7h16v-7"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v14"/></svg>;
    case "send":       return <svg {...common}><path d="m5 12 16-8-5 18-4-7-7-3Z"/></svg>;
    case "lock":       return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case "check":      return <svg {...common}><path d="m4 12 5 5L20 6"/></svg>;
    case "play":       return <svg viewBox="0 0 24 24" width={size} height={size} fill={color}><polygon points="7,4 20,12 7,20"/></svg>;
    case "chevron":    return <svg {...common}><path d="m9 6 6 6-6 6"/></svg>;
    case "more":       return <svg {...common}><circle cx="5" cy="12" r="1.2" fill={color}/><circle cx="12" cy="12" r="1.2" fill={color}/><circle cx="19" cy="12" r="1.2" fill={color}/></svg>;
    case "settings":   return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.4-2.3.9a7 7 0 0 0-2-1.2L14 3h-4l-.6 2.6a7 7 0 0 0-2 1.2l-2.3-.9-2 3.4 2 1.5A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.2l-2 1.5 2 3.4 2.3-.9a7 7 0 0 0 2 1.2L10 21h4l.6-2.6a7 7 0 0 0 2-1.2l2.3.9 2-3.4-2-1.5c0-.4.1-.8.1-1.2Z"/></svg>;
    case "users":      return <svg {...common}><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><circle cx="17" cy="7" r="3"/><path d="M22 20a5 5 0 0 0-4-5"/></svg>;
    case "video":      return <svg {...common}><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3"/></svg>;
    case "pin":        return <svg {...common}><path d="M12 2 9 7H5l7 7-1 8 5-8 4-4-4-1-3-5-1-2Z"/></svg>;
    case "moon":       return <svg {...common}><path d="M20 15A8 8 0 0 1 9 4a8 8 0 1 0 11 11Z"/></svg>;
    case "sun":        return <svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5"/></svg>;
    default: return null;
  }
}
Object.assign(window, { Icon });