import Image from "@/components/ui/resilient-image";
import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
import { cn } from "@/lib/utils";

export type CatalogItemKind = "character" | "weapon" | "artifact";

export type CatalogItemImageData = {
  key: string;
  imageUrl: string | null;
  rarity?: number | null;
};

export function CatalogItemImage({
  item,
  kind,
  alt,
  rarityBackground = true,
  className,
  imageClassName,
  sizes,
  loading,
  title,
}: {
  item: CatalogItemImageData;
  kind: CatalogItemKind;
  alt: string;
  rarityBackground?: boolean;
  className?: string;
  imageClassName?: string;
  sizes?: string;
  loading?: "eager" | "lazy";
  title?: string;
}) {
  const backgroundClass = rarityBackground
    ? kind === "character"
      ? characterRarityGradientClass(item.key, item.rarity)
      : rarityGradientClass(item.rarity)
    : undefined;

  return (
    <div title={title} className={cn("relative overflow-hidden", backgroundClass, className)}>
      {item.imageUrl ? (
        <Image
          src={item.imageUrl}
          alt={alt}
          fill
          sizes={sizes}
          loading={loading}
          className={cn(kind === "artifact" ? "object-contain" : "object-cover scale-105", imageClassName)}
        />
      ) : null}
    </div>
  );
}