"use client";
import Image from "next/image";

import { UserMessageAvatar } from "@/app/_components";

export interface MessageAvatarProps {
  isFromAI: boolean;
  userAvatarUrl?: string | null;
}

const AVATAR_CLASS_NAME =
  "flex size-(--chat-avatar-size,43px) shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-(--color-avatar-border,#fbf3f5) bg-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))";

export function MessageAvatar({ isFromAI, userAvatarUrl }: MessageAvatarProps) {
  if (isFromAI) {
    return (
      <div className={AVATAR_CLASS_NAME} aria-label="AI avatar">
        <Image
          src="/images/chat/pic-chat-elio.png"
          alt="Elio"
          width={43}
          height={43}
          priority
          className="size-full object-cover"
        />
      </div>
    );
  }

  return <UserMessageAvatar avatarUrl={userAvatarUrl} />;
}
