import React from 'react';
import {
  pickStoredProfileEffectIntroUrl,
  pickStoredProfileEffectLoopUrl,
} from '../../utils/collectibleAssets';
import { ProfileEffectMedia } from './ProfileEffectMedia';
import * as css from './styles.css';

type ProfileCollectibleOverlaysProps = {
  assetUrls: Record<string, string | undefined>;
};

export function ProfileCollectibleOverlays({ assetUrls }: ProfileCollectibleOverlaysProps) {
  const introUrl = pickStoredProfileEffectIntroUrl(assetUrls);
  const loopUrl = pickStoredProfileEffectLoopUrl(assetUrls);

  if (!introUrl && !loopUrl) return null;

  return (
    <div className={css.UserHeroCollectibleLayer} aria-hidden="true">
      <ProfileEffectMedia
        introUrl={introUrl}
        loopUrl={loopUrl}
        className={css.ProfileEffectOverlay}
      />
    </div>
  );
}