import React, { ReactElement } from 'react';
import { Container, Box, Typography, Button } from '@mui/material';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import RefreshIcon from '@mui/icons-material/Refresh';

interface DashboardErrorPageProps {
  errorMessage?: string;
  onRetry?: () => void;
}

const DashboardErrorPage = ({
  errorMessage = "We couldn't load your dashboard data.",
  onRetry,
}: DashboardErrorPageProps): ReactElement => {
  return (
    <Container maxWidth="md" sx={{ mt: 8, mb: 4, textAlign: 'center' }}>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
        minHeight="60vh" // Give it some vertical height
      >
        <ErrorOutlineIcon color="error" sx={{ fontSize: 80, mb: 3 }} />
        <Typography variant="h5" color="text.secondary" sx={{ mb: 1 }}>
          Oops! Something went wrong.
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
          {errorMessage} Please try again.
        </Typography>
        {onRetry && (
          <Button variant="contained" color="primary" startIcon={<RefreshIcon />} onClick={onRetry}>
            Retry
          </Button>
        )}
      </Box>
    </Container>
  );
};

export default DashboardErrorPage;
