/**
 * @file AiToolIcon.tsx
 * @description An AI tool's icon: the server's cached favicon
 * (GET /api/ai-tools/:id/icon), or the label's first letter when there is
 * none. Shared by the AI Tools modal and the Add-lane tool picker.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useState } from "react";
import { api, type AiTool } from "../lib/api";

/**
 * @param props.tool - The catalog entry.
 * @param props.className - Size classes (default `h-8 w-8`).
 */
export function AiToolIcon({
  tool,
  className = "h-8 w-8",
}: {
  tool: Pick<AiTool, "id" | "label">;
  className?: string;
}) {
  // Keyed by id: one instance showing another tool must retry its icon.
  const [failedId, setFailedId] = useState<string | null>(null);
  if (failedId !== tool.id) {
    return (
      <img
        src={api.aiTools.iconUrl(tool.id)}
        alt=""
        onError={() => setFailedId(tool.id)}
        className={`${className} shrink-0 rounded-md bg-surface-4 object-contain p-1`}
      />
    );
  }
  return (
    <span
      className={`${className} flex shrink-0 items-center justify-center rounded-md bg-surface-4 text-xs font-semibold text-fg-secondary`}
    >
      {tool.label.charAt(0).toUpperCase()}
    </span>
  );
}