import React from 'react';
import { Box } from '@wix/design-system';
import { File } from './FileProps';
import { Thumbnail } from './Thumbnail';
import { FileDetails } from './FileDetails';
import { DownloadButton } from './DownloadButton';

export interface FileCardProps {
  file: File;
  showDownloadCTA?: boolean;
  showDetails?: boolean;
}

export const FileCard = ({
  file,
  showDownloadCTA = false,
  showDetails = false,
}: FileCardProps) => {
  // const downloadIconWidth = showDownloadCTA ? 36 : 0;

  return (
    <Box
      verticalAlign="middle"
      align="left"
      gap={showDetails ? 'SP2' : 'SP1'}
      paddingBlockEnd={1}
      maxWidth="100%"
      width="100%"
      height="100%"
      dataHook={`file-card-${file.mediaId}`}
    >
      <Thumbnail file={file} showDetails={showDetails} />
      <FileDetails file={file} showDetails={showDetails} />
      {showDownloadCTA && !file.private ? <DownloadButton file={file} /> : null}
    </Box>
  );
};