// Inline SVG icon set. Minimal, stroke-based, neutral.
const Icon = ({ name, size = 18, stroke = 1.6, className = "", style = {} }) => {
  const props = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    className,
    style,
  };
  switch (name) {
    case "image":      return <svg {...props}><rect x="3" y="4" width="18" height="16" rx="1.5"/><circle cx="9" cy="10" r="1.6"/><path d="M4 18l5-5 4 4 3-3 4 4"/></svg>;
    case "document":   return <svg {...props}><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/><path d="M10 13h6M10 17h6M10 9h3"/></svg>;
    case "archive":    return <svg {...props}><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v12h14V8"/><path d="M10 12h4"/></svg>;
    case "search":     return <svg {...props}><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-3.6-3.6"/></svg>;
    case "download":   return <svg {...props}><path d="M12 4v12"/><path d="M7 11l5 5 5-5"/><path d="M4 20h16"/></svg>;
    case "upload":     return <svg {...props}><path d="M12 20V8"/><path d="M7 13l5-5 5 5"/><path d="M4 4h16"/></svg>;
    case "filter":     return <svg {...props}><path d="M4 5h16M7 12h10M10 19h4"/></svg>;
    case "grid":       return <svg {...props}><rect x="4" y="4" width="7" height="7"/><rect x="13" y="4" width="7" height="7"/><rect x="4" y="13" width="7" height="7"/><rect x="13" y="13" width="7" height="7"/></svg>;
    case "list":       return <svg {...props}><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
    case "folder":     return <svg {...props}><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5A1.5 1.5 0 0 1 19.5 20h-15A1.5 1.5 0 0 1 3 18.5z"/></svg>;
    case "chevron":    return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case "chevronDown":return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case "close":      return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "plus":       return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case "more":       return <svg {...props}><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>;
    case "star":       return <svg {...props}><path d="M12 4l2.4 5 5.6.8-4 4 1 5.6L12 16.8 6.9 19.4 8 13.8 4 9.8 9.6 9z"/></svg>;
    case "clock":      return <svg {...props}><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg>;
    case "share":      return <svg {...props}><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"/></svg>;
    case "user":       return <svg {...props}><circle cx="12" cy="8" r="3.5"/><path d="M5 20c1.5-4 4-5 7-5s5.5 1 7 5"/></svg>;
    case "lock":       return <svg {...props}><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>;
    case "mail":       return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="1.5"/><path d="M3 7l9 6 9-6"/></svg>;
    case "eye":        return <svg {...props}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case "eyeOff":     return <svg {...props}><path d="M3 3l18 18"/><path d="M10.6 6.1A11 11 0 0 1 12 6c6 0 10 6 10 6a17 17 0 0 1-3.2 3.7"/><path d="M6.2 7.6A17 17 0 0 0 2 12s4 6 10 6c1.6 0 3-.3 4.3-.9"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg>;
    case "tag":        return <svg {...props}><path d="M4 4h7l9 9-7 7-9-9z"/><circle cx="8.5" cy="8.5" r="1.2"/></svg>;
    case "logout":     return <svg {...props}><path d="M14 4h5v16h-5"/><path d="M10 8l-4 4 4 4"/><path d="M6 12h12"/></svg>;
    case "sort":       return <svg {...props}><path d="M7 4v14M3 14l4 4 4-4"/><path d="M17 20V6M13 10l4-4 4 4"/></svg>;
    case "calendar":   return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="1.5"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    case "settings":   return <svg {...props}><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-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 1.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.3H9a1.7 1.7 0 0 0 1-1.5V3a2 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.8V9c.4.6 1 1 1.7 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>;
    case "help":       return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .8-1 1.7"/><circle cx="12" cy="17" r=".6" fill="currentColor"/></svg>;
    case "bell":       return <svg {...props}><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>;
    case "check":      return <svg {...props}><path d="M5 12l4 4 10-10"/></svg>;
    case "arrowRight": return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "expand":     return <svg {...props}><path d="M4 4h6M4 4v6M20 20h-6M20 20v-6"/></svg>;
    case "pdf":        return <svg {...props}><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/><text x="12" y="17" textAnchor="middle" fontSize="6" fill="currentColor" stroke="none" fontWeight="700" fontFamily="Helvetica">PDF</text></svg>;
    case "xlsx":       return <svg {...props}><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/><text x="12" y="17" textAnchor="middle" fontSize="6" fill="currentColor" stroke="none" fontWeight="700" fontFamily="Helvetica">XLS</text></svg>;
    case "docx":       return <svg {...props}><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/><text x="12" y="17" textAnchor="middle" fontSize="6" fill="currentColor" stroke="none" fontWeight="700" fontFamily="Helvetica">DOC</text></svg>;
    case "zip":        return <svg {...props}><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/><path d="M11 9v2M11 12v2M11 15v2"/></svg>;
    default: return null;
  }
};

window.Icon = Icon;