import React from 'react';
import { Box } from '@wix/design-system';
import { File } from './FileProps';
import {
  resolveFileByMediaType,
  SMALL_THUMB_WIDTH,
  THUMB_WIDTH,
} from './resolveFileByMediaType';

interface ThumbnailProps {
  file: File;
  showDetails: boolean;
}

export function Thumbnail({ file, showDetails }: ThumbnailProps) {
  const { thumbnail } = resolveFileByMediaType(file, showDetails);
  return (
    <Box
      dataHook={`file-thumbnail-${file.mediaType}-${file.mediaId}`}
      align="center"
      verticalAlign="middle"
      width={showDetails ? THUMB_WIDTH : SMALL_THUMB_WIDTH}
      height={showDetails ? THUMB_WIDTH : SMALL_THUMB_WIDTH}
    >
      {thumbnail}
    </Box>
  );
}