import React from 'react';
import {
  Box,
  LinearProgress,
  Typography,
  Paper,
  Chip,
} from '@mui/material';
import { StepStatus } from '../../types';

interface ProgressBarProps {
  progress: number;
  status?: StepStatus;
  stepName?: string;
  details?: string;
  showPercentage?: boolean;
}

export const ProgressBar: React.FC<ProgressBarProps> = ({
  progress,
  status,
  stepName,
  details,
  showPercentage = true,
}) => {
  const getProgressColor = (status?: StepStatus): 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' => {
    switch (status) {
      case StepStatus.Completed:
        return 'success';
      case StepStatus.Failed:
        return 'error';
      case StepStatus.InProgress:
        return 'primary';
      default:
        return 'primary';
    }
  };

  return (
    <Paper elevation={1} sx={{ p: 2, mb: 1 }}>
      <Box display="flex" alignItems="center" justifyContent="space-between" mb={1}>
        <Box display="flex" alignItems="center" gap={1}>
          {stepName && (
            <Typography variant="subtitle2" color="text.primary">
              {stepName}
            </Typography>
          )}
          {status && (
            <Chip
              label={status}
              size="small"
              color={getProgressColor(status)}
              variant="outlined"
            />
          )}
        </Box>
        {showPercentage && (
          <Typography variant="body2" color="text.secondary">
            {Math.round(progress)}%
          </Typography>
        )}
      </Box>
      
      <LinearProgress
        variant="determinate"
        value={Math.min(progress, 100)}
        color={getProgressColor(status)}
        sx={{ 
          height: 8, 
          borderRadius: 4,
          mb: details ? 1 : 0 
        }}
      />
      
      {details && (
        <Typography variant="body2" color="text.secondary" mt={1}>
          {details}
        </Typography>
      )}
    </Paper>
  );
};