/**
 * Per-agent brand marks.
 *
 * - **OpenClaw** uses the inline "mascot" SVG from the legacy viewer
 *   (`apps/memos-local-openclaw/src/viewer/html.ts` ~#1218).
 * - **Hermes** uses the dedicated logo shipped with the hermes
 *   adapter (`apps/memos-local-hermes/adapters/hermes/logo.svg`),
 *   served as a static asset from the viewer's `public/` directory.
 *
 * The openclaw mark is inlined (no network fetch); hermes is loaded
 * from `/hermes-logo.svg` so we can ship the exact legacy art.
 */
import type { JSX } from "preact";

export interface AgentLogoProps {
  agent?: "openclaw" | "hermes" | null;
  size?: number;
  class?: string;
}

export function AgentLogo({ agent, size = 72, class: className }: AgentLogoProps): JSX.Element {
  if (agent === "hermes") {
    return (
      <img
        src="/hermes-logo.svg"
        alt="Hermes"
        width={size}
        height={size}
        style={`display:block;border-radius:${Math.round(size / 6)}px`}
        class={className}
      />
    );
  }
  return <OpenClawLogo size={size} className={className} />;
}

function OpenClawLogo({
  size = 72,
  className,
}: {
  size?: number;
  className?: string;
}): JSX.Element {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 120 120"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="OpenClaw"
      class={className}
    >
      <defs>
        <linearGradient id="openclaw-body" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#ff4d4d" />
          <stop offset="100%" stop-color="#991b1b" />
        </linearGradient>
      </defs>
      <path
        d="M60 10C30 10 15 35 15 55C15 75 30 95 45 100L45 110L55 110L55 100C55 100 60 102 65 100L65 110L75 110L75 100C90 95 105 75 105 55C105 35 90 10 60 10Z"
        fill="url(#openclaw-body)"
      />
      <path
        d="M20 45C5 40 0 50 5 60C10 70 20 65 25 55C28 48 25 45 20 45Z"
        fill="url(#openclaw-body)"
      />
      <path
        d="M100 45C115 40 120 50 115 60C110 70 100 65 95 55C92 48 95 45 100 45Z"
        fill="url(#openclaw-body)"
      />
      <path d="M45 15Q35 5 30 8" stroke="#ff4d4d" stroke-width="2" stroke-linecap="round" />
      <path d="M75 15Q85 5 90 8" stroke="#ff4d4d" stroke-width="2" stroke-linecap="round" />
      <circle cx={45} cy={35} r={6} fill="#050810" />
      <circle cx={75} cy={35} r={6} fill="#050810" />
      <circle cx={46} cy={34} r={2} fill="#00e5cc" />
      <circle cx={76} cy={34} r={2} fill="#00e5cc" />
    </svg>
  );
}
