"use client";

import Image from "next/image";

import styles from "./message-avatar.module.css";

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

export function UserMessageAvatar({
  avatarUrl,
  className,
  size = 43,
}: UserMessageAvatarProps) {
  const avatarClassName = [styles.avatar, className].filter(Boolean).join(" ");
  const avatarStyle = { width: size, height: size };

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

  return (
    <div
      className={avatarClassName}
      style={avatarStyle}
      aria-label="Guest avatar"
    >
      <Image
        src="/images/chat/pic-chat-guest.png"
        alt="Guest"
        width={size}
        height={size}
      />
    </div>
  );
}