import { Box, Typography, Paper } from '@mui/material';
import BuildIcon from '@mui/icons-material/Build';
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';

interface Props {
  message?: string;
}

export default function ServiceModePage({ message }: Props) {
  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        bgcolor: 'background.default',
        p: 3,
      }}
    >
      <Paper elevation={3} sx={{ p: 6, maxWidth: 520, textAlign: 'center', borderRadius: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, mb: 3 }}>
          <LocalFireDepartmentIcon sx={{ fontSize: 48, color: 'error.main' }} />
          <BuildIcon sx={{ fontSize: 48, color: 'text.secondary' }} />
        </Box>
        <Typography variant="h4" fontWeight={700} gutterBottom>
          Wartungsarbeiten
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
          {message || 'Das Dashboard befindet sich aktuell im Wartungsmodus. Bitte versuche es später erneut.'}
        </Typography>
        <Typography variant="caption" color="text.disabled">
          Feuerwehr Dashboard
        </Typography>
      </Paper>
    </Box>
  );
}
