/**
 * 协议彩色图标：饱和渐变圆角方块 + 白色图形（对齐 Apifox / Apipost 的新建面板视觉）。
 * 新建面板、新建弹窗、侧栏树、标签页共用同一套配色，保证全应用一致。
 */
import type { RequestKind } from "@opsxapi/core";
import { Icon, type IconName } from "./icons";

export const KIND_COLORS: Record<RequestKind | "folder", { color: string; icon: IconName; label: string }> = {
  http: { color: "#3b82f6", icon: "globe", label: "HTTP" },
  graphql: { color: "#ec4899", icon: "hexagon", label: "GraphQL" },
  websocket: { color: "#f97316", icon: "zap", label: "WebSocket" },
  sse: { color: "#0ea5e9", icon: "radio", label: "SSE" },
  socketio: { color: "#14b8a6", icon: "plug-zap", label: "Socket.IO" },
  mqtt: { color: "#10b981", icon: "mailbox", label: "MQTT" },
  folder: { color: "#8b5cf6", icon: "folder-plus", label: "目录" },
};

export function KindIcon({
  kind,
  size = 28,
  className,
}: {
  kind: RequestKind | "folder";
  size?: number;
  className?: string;
}) {
  const meta = KIND_COLORS[kind];
  return (
    <span
      className={className}
      aria-hidden="true"
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: size,
        height: size,
        borderRadius: Math.max(5, Math.round(size * 0.3)),
        background: `linear-gradient(135deg, ${meta.color}, color-mix(in srgb, ${meta.color} 72%, #000))`,
        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.18)",
        flexShrink: 0,
      }}
    >
      <Icon name={meta.icon} size={Math.round(size * 0.56)} style={{ color: "#fff", strokeWidth: 2.2 }} />
    </span>
  );
}