"use client";

import Image from "next/image";
import { getAgentIconPath } from "@/features/ai/utils/agent-helpers";

type AiAgentAvatarProps = {
  details?: Record<string, unknown> | null;
  size?: "sm" | "md";
  className?: string;
};

function DefaultAgentIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <path d="M12 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
      <path d="M6 20c0-3.3 2.7-6 6-6s6 2.7 6 6" />
    </svg>
  );
}

const sizeConfig = {
  sm: {
    icon: "size-16",
    imageWidth: 128,
    imageHeight: 256,
  },
  md: {
    icon: "size-16",
    imageWidth: 128,
    imageHeight: 256,
  },
} as const;

export function AiAgentAvatar({
  details,
  size = "md",
  className = "",
}: AiAgentAvatarProps) {
  const iconPath = getAgentIconPath(details);
  const config = sizeConfig[size];

  if (iconPath) {
    return (
      <div
        className={`inline-flex shrink-0 overflow-hidden rounded-2xl ${className}`}
      >
        <Image
          src={iconPath}
          alt=""
          width={config.imageWidth}
          height={config.imageHeight}
          className="size-full object-cover"
          quality={100}
        />
      </div>
    );
  }

  return (
    <div
      className={`inline-flex shrink-0 items-center justify-center rounded-2xl bg-violet-500/15 text-violet-600 dark:text-violet-300  ${className}`}
    >
      <DefaultAgentIcon className={config.icon} />
    </div>
  );
}