// <AgentIcon> — the agent's icon from swarm-controller's
// `GET /api/agents/{name}/icon`, the same square and fallback as the hive
// dashboard's container row: an agent with no icon (404) or an unreachable
// controller shows the dimmed hyperhive mark instead of a broken image.
// Always an `<img>`: the body is an agent-authored SVG, and only an image load
// keeps its script from running.
import { useState } from "preact/hooks";
import "./AgentIcon.css";

export function AgentIcon({
  name,
  small = false,
}: {
  name: string;
  /** Badge-sized, for beside a line of text, rather than the card's square. */
  small?: boolean;
}) {
  const [fallback, setFallback] = useState(false);
  return (
    <div
      class={
        "ui-agent-icon" +
        (small ? " ui-agent-icon-small" : "") +
        (fallback ? " ui-agent-icon-none" : "")
      }
    >
      <img
        alt=""
        src={
          fallback
            ? "/favicon.svg"
            : `/api/agents/${encodeURIComponent(name)}/icon`
        }
        onError={() => setFallback(true)}
      />
    </div>
  );
}