import Image from "next/image";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

type DiscordAvatarProps = {
  avatarUrl: string | null;
  decorationUrl?: string | null;
  alt: string;
  fallback: string;
  className?: string;
  imageError?: boolean;
  onImageError?: () => void;
};

export function DiscordAvatar({
  avatarUrl,
  decorationUrl,
  alt,
  fallback,
  className,
  imageError = false,
  onImageError,
}: DiscordAvatarProps) {
  return (
    <div className={cn("relative shrink-0", className)}>
      <Avatar className="size-full">
        {!imageError && avatarUrl && (
          <AvatarImage src={avatarUrl} alt={alt} onError={onImageError} />
        )}
        <AvatarFallback>{fallback}</AvatarFallback>
      </Avatar>
      {decorationUrl && (
        <Image
          src={decorationUrl}
          alt=""
          aria-hidden
          width={160}
          height={160}
          className="pointer-events-none absolute left-1/2 top-1/2 size-[125%] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain"
          unoptimized
        />
      )}
    </div>
  );
}