Stirling-PDF/frontend/src/core/components/shared/FilePreview.tsx

import React from 'react';
import { Box, Center } from '@mantine/core';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import { StirlingFileStub } from '@app/types/fileContext';
import DocumentThumbnail from '@app/components/shared/filePreview/DocumentThumbnail';
import DocumentStack from '@app/components/shared/filePreview/DocumentStack';
import HoverOverlay from '@app/components/shared/filePreview/HoverOverlay';
import NavigationArrows from '@app/components/shared/filePreview/NavigationArrows';

export interface FilePreviewProps {
  // Core file data
  file: File | StirlingFileStub | null;
  thumbnail?: string | null;
  
  // Optional features
  showStacking?: boolean;
  showHoverOverlay?: boolean;
  showNavigation?: boolean;
  
  // State
  totalFiles?: number;
  isAnimating?: boolean;
  
  // Event handlers
  onFileClick?: (file: File | StirlingFileStub | null) => void;
  onPrevious?: () => void;
  onNext?: () => void;
}

const FilePreview: React.FC<FilePreviewProps> = ({
  file,
  thumbnail,
  showStacking = false,
  showHoverOverlay = false,
  showNavigation = false,
  totalFiles = 1,
  isAnimating = false,
  onFileClick,
  onPrevious,
  onNext
}) => {
  if (!file) {
    return (
      <Box style={{ width: '100%', height: '100%' }}>
        <Center style={{ width: '100%', height: '100%' }}>
          <InsertDriveFileIcon 
            style={{ 
              fontSize: '4rem', 
              color: 'var(--mantine-color-gray-4)',
              opacity: 0.6 
            }} 
          />
        </Center>
      </Box>
    );
  }
  
  const hasMultipleFiles = totalFiles > 1;
  
  // Animation styles
  const animationStyle = isAnimating ? {
    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
    transform: 'scale(0.95) translateX(1.25rem)',
    opacity: 0.7
  } : {};

  // Build the component composition
  let content = (
    <DocumentThumbnail
      file={file}
      thumbnail={thumbnail}
      style={animationStyle}
      onClick={() => onFileClick?.(file)}
    />
  );

  // Wrap with hover overlay if needed
  if (showHoverOverlay && onFileClick) {
    content = <HoverOverlay>{content}</HoverOverlay>;
  }

  // Wrap with document stack if needed
  if (showStacking) {
    content = (
      <DocumentStack totalFiles={totalFiles}>
        {content}
      </DocumentStack>
    );
  }

  // Wrap with navigation if needed
  if (showNavigation && hasMultipleFiles && onPrevious && onNext) {
    content = (
      <NavigationArrows
        onPrevious={onPrevious}
        onNext={onNext}
        disabled={isAnimating}
      >
        {content}
      </NavigationArrows>
    );
  }

  return (
    <Box style={{ width: '100%', height: '100%' }}>
      {content}
    </Box>
  );
};

export default FilePreview;