const TECH_STACK_COLORS: Record<string, string> = {
  "体系": "bg-orange-50 text-orange-500",
  "客户端": "bg-green-50 text-green-600",
  "语言": "bg-blue-50 text-blue-600",
  "框架/工具": "bg-indigo-50 text-indigo-500",
};

export function renderTechStack(techStack: string) {
  try {
    const parsed = JSON.parse(techStack) as Record<string, string[]>;
    return (
      <div className="flex flex-col gap-1.5">
        {Object.entries(parsed).map(([cat, tags]) =>
          tags.length > 0 ? (
            <div key={cat} className="flex flex-wrap items-center gap-1">
              <span className="text-[9px] text-gray-400 mr-0.5">{cat}</span>
              {tags.map((tag) => (
                <span
                  key={tag}
                  className={`text-[10px] px-1.5 py-0.5 rounded-full ${TECH_STACK_COLORS[cat] ?? "bg-indigo-50 text-indigo-500"}`}
                >
                  {tag}
                </span>
              ))}
            </div>
          ) : null
        )}
      </div>
    );
  } catch {
    return (
      <div className="flex flex-wrap gap-1">
        {techStack.split(",").map((tag) => (
          <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded-full bg-indigo-50 text-indigo-500">
            {tag.trim()}
          </span>
        ))}
      </div>
    );
  }
}