import { AgentIcon } from "./AgentIconPicker";
import { agentRoleColors, agentRoleColorDefault } from "../lib/agent-role-colors";
import type { AgentRole } from "@paperclipai/shared";

interface ChatMessageIdentityBarProps {
  agentName: string;
  agentIcon?: string | null;
  agentRole?: AgentRole | null;
  timestamp?: string;
  isStreaming?: boolean;
}

export function ChatMessageIdentityBar({
  agentName,
  agentIcon,
  agentRole,
  timestamp,
  isStreaming,
}: ChatMessageIdentityBarProps) {
  const colorClass = agentRole
    ? (agentRoleColors[agentRole] ?? agentRoleColorDefault)
    : agentRoleColorDefault;

  return (
    <div className="flex items-center gap-2 mb-1">
      <AgentIcon icon={agentIcon} className={`h-4 w-4 ${colorClass}`} />
      <span className={`text-[13px] font-semibold ${colorClass}`}>{agentName}</span>
      {isStreaming && (
        <span className="h-1.5 w-1.5 rounded-full bg-cyan-400 animate-pulse" />
      )}
      {timestamp && (
        <span className="text-[11px] text-muted-foreground">
          {new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
        </span>
      )}
    </div>
  );
}