"use client";

import Image from "next/image";

export interface UserMessageAvatarProps {
  avatarUrl?: string | null;
  className?: string;
  size?: number | string;
}

export function UserMessageAvatar({
  avatarUrl,
  className,
  size = 43,
}: UserMessageAvatarProps) {
  const avatarClassName = [
    "flex 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))",
    className,
  ]
    .filter(Boolean)
    .join(" ");
  const avatarStyle = { width: size, height: size };
  const imageSize = typeof size === "number" ? size : 64;

  if (avatarUrl && avatarUrl.length > 0) {
    return (
      <div
        className={avatarClassName}
        style={avatarStyle}
        aria-label="User avatar"
      >
        <Image
          src={avatarUrl}
          alt=""
          width={imageSize}
          height={imageSize}
          className="size-full object-cover"
        />
      </div>
    );
  }

  return (
    <div
      className={avatarClassName}
      style={avatarStyle}
      aria-label="Guest avatar"
    >
      <Image
        src="/images/avatar/placeholder.png"
        alt="Guest"
        width={imageSize}
        height={imageSize}
        className="size-full object-cover"
      />
    </div>
  );
}