import React from 'react';
import { LinearProgress, Typography, Box } from '@mui/material';

function UploadProgress({ 
  progress = 0, 
  currentFile = null, 
  totalFiles = 0, 
  completedFiles = 0,
  isUploading = false 
}) {
  if (!isUploading) return null;

  const containerSx = {
    marginTop: '20px',
    marginBottom: '20px',
    padding: '20px',
    border: '1px solid #e0e0e0',
    borderRadius: '8px',
    backgroundColor: '#fafafa'
  };

  const progressBarSx = {
    height: '8px',
    borderRadius: '4px',
    marginBottom: '10px'
  };

  const progressTextSx = {
    fontSize: '14px',
    color: '#666666',
    textAlign: 'center'
  };

  const fileInfoSx = {
    fontSize: '12px',
    color: '#999999',
    textAlign: 'center',
    marginTop: '5px'
  };

  return (
    <Box sx={containerSx}>
      <Box display="flex" alignItems="center" marginBottom={2}>
        <Box sx={{ width: '100%', marginRight: 1 }}>
          <LinearProgress 
            variant="determinate" 
            value={progress} 
            sx={progressBarSx}
          />
        </Box>
        <Box minWidth={35}>
          <Typography variant="body2" color="text.secondary">
            {Math.round(progress)}%
          </Typography>
        </Box>
      </Box>
      
      <Box sx={progressTextSx}>
        {currentFile ? (
          <>📤 Uploading: {currentFile}</>
        ) : (
          <>📤 Uploading {totalFiles} Bild{totalFiles !== 1 ? 'er' : ''}...</>
        )}
      </Box>
      
      {totalFiles > 1 && (
        <Box sx={fileInfoSx}>
          {completedFiles} von {totalFiles} Dateien abgeschlossen
        </Box>
      )}
    </Box>
  );
}

export default UploadProgress;