import { Box, CircularProgress, Typography, LinearProgress } from '@mui/material'

interface ProgressOverlayProps {
  message?: string
  progress?: number
  variant?: 'indeterminate' | 'determinate'
}

export default function ProgressOverlay({
  message = 'Loading...',
  progress,
  variant = 'indeterminate',
}: ProgressOverlayProps) {
  return (
    <Box
      sx={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        bgcolor: 'rgba(255, 255, 255, 0.8)',
        zIndex: 1000,
      }}
    >
      <CircularProgress sx={{ mb: 2 }} />
      {variant === 'determinate' && progress !== undefined && (
        <Box sx={{ width: '200px', mb: 2 }}>
          <LinearProgress variant="determinate" value={progress} />
          <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5 }}>
            {progress.toFixed(0)}%
          </Typography>
        </Box>
      )}
      <Typography variant="body2" color="text.secondary">
        {message}
      </Typography>
    </Box>
  )
}

