import type { JSX } from "react";
import { cn } from "../../lib/utils";
import McpLogoPng from "../../assets/logos/mcp.png";

/**
 * Official Model Context Protocol logo (from Wikimedia Commons). The PNG
 * is a black-on-white raster of the official mark — flipped to a white
 * silhouette on the dark header via `invert` so it reads against the
 * app background.
 */
export function McpLogo({ className }: { className?: string }): JSX.Element {
  return (
    <img
      src={McpLogoPng}
      alt="Model Context Protocol"
      aria-hidden="true"
      className={cn("inline-block size-8 object-contain invert", className)}
    />
  );
}
