import React from 'react';
import { 
  Alert, 
  AlertTitle, 
  Box, 
  Button, 
  Typography 
} from '@mui/material';
import { Refresh as RefreshIcon } from '@mui/icons-material';

interface ErrorDisplayProps {
  message?: string;
  error?: Error | null;
  onRetry?: () => void;
}

export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ 
  message = 'An error occurred', 
  error,
  onRetry 
}) => {
  return (
    <Box py={4}>
      <Alert severity="error">
        <AlertTitle>Error</AlertTitle>
        <Typography variant="body2" gutterBottom>
          {message}
        </Typography>
        {error && (
          <Typography variant="body2" color="text.secondary">
            {error.message}
          </Typography>
        )}
        {onRetry && (
          <Box mt={2}>
            <Button
              startIcon={<RefreshIcon />}
              onClick={onRetry}
              variant="outlined"
              size="small"
            >
              Try Again
            </Button>
          </Box>
        )}
      </Alert>
    </Box>
  );
};