"use client";

import Image from "next/image";
import type { CSSProperties } from "react";

export interface CharacterAvatarProps {
  src?: string;
  alt?: string;
  className?: string;
  size?: number | string;
  imageSize?: number;
  priority?: boolean;
}

export function CharacterAvatar({
  src = "/images/chat/pic-chat-elio.png",
  alt = "Elio Silvestri",
  className,
  size = 43,
  imageSize,
  priority = false,
}: CharacterAvatarProps) {
  const resolvedImageSize =
    imageSize ?? (typeof size === "number" ? size : 96);
  const style: CSSProperties = {
    width: size,
    height: size,
  };

  return (
    <span
      className={[
        "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--color-avatar-border,#fbf3f5)",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      style={style}
    >
      <Image
        src={src}
        alt={alt}
        width={resolvedImageSize}
        height={resolvedImageSize}
        priority={priority}
        className="size-full object-cover"
      />
    </span>
  );
}