"use client";

import { useState } from "react";
import { getReferenceModelIcon, ReferenceIcon } from "./reference-icon";

type ModelIdentityIconProps = {
  name: string;
  identity?: string;
  avatarUrl?: string | null;
  size?: number;
  className?: string;
};

export function ModelIdentityIcon({
  name,
  identity,
  avatarUrl,
  size = 18,
  className,
}: ModelIdentityIconProps) {
  const [failedUrl, setFailedUrl] = useState<string | null>(null);
  const reference = getReferenceModelIcon(`${name} ${identity || ""}`);
  if (reference || !avatarUrl || failedUrl === avatarUrl) {
    return (
      <ReferenceIcon
        name={reference || "model-auto"}
        size={size}
        className={className}
      />
    );
  }
  return (
    <img
      alt=""
      aria-hidden="true"
      className={className}
      src={avatarUrl}
      width={size}
      height={size}
      style={{ width: size, height: size, objectFit: "contain", flexShrink: 0 }}
      onError={() => setFailedUrl(avatarUrl)}
    />
  );
}