import React from 'react';
import { DiscordCollectibleItem } from '../../../utils/discordCollectibles';
import {
  isCatalogVideoPreview,
  pickCatalogAnimatedPreviewUrl,
  pickCatalogStaticPreviewUrl,
} from '../../../utils/collectibleAssets';

type CollectiblePreviewMediaProps = {
  item: DiscordCollectibleItem;
  className?: string;
  restartToken?: number;
};

export function CollectiblePreviewMedia({
  item,
  className,
  restartToken = 0,
}: CollectiblePreviewMediaProps) {
  const staticUrl = pickCatalogStaticPreviewUrl(item);
  const animatedUrl = pickCatalogAnimatedPreviewUrl(item);
  const activeUrl = animatedUrl ?? staticUrl;

  if (!activeUrl) return null;

  if (animatedUrl && isCatalogVideoPreview(animatedUrl)) {
    return (
      <video
        key={restartToken}
        className={className}
        src={animatedUrl}
        autoPlay
        loop
        muted
        playsInline
      />
    );
  }

  return (
    <img
      key={restartToken}
      className={className}
      src={activeUrl}
      alt=""
      loading="lazy"
      draggable={false}
    />
  );
}