import { Media } from '@/back-api';
import { MenuElement } from '@/components/contextMenu/ContextMenu';
import { useSpecificMedia } from '@/service/Media';
import { DisplayMediaFull } from './DisplayMediaFull';
import { DisplayMediaSkeleton } from './DisplayMediaSkeleton';


export type DisplayMediaProps = {
  MediaId: Media['id'];
  onClick?: () => void;
  contextMenu?: MenuElement[];
};
export const DisplayMediaFullId = ({
  MediaId,
  onClick,
  contextMenu,
}: DisplayMediaProps) => {
  const { dataMedia } = useSpecificMedia(MediaId);
  if (dataMedia) {
    return (
      <DisplayMediaFull
        media={dataMedia}
        onClick={onClick}
        contextMenu={contextMenu}
      />
    );
  } else {
    return <DisplayMediaSkeleton />;
  }
};
