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

/** A centered panel with a title and a message, for states before the application can render. */
export default function Card(props: { title: string; message: string }) {
  return (
    <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', justifyContent: 'center', p: 3 }}>
      <Paper sx={{ maxWidth: 480, p: 3 }}>
        <Typography variant="h6" sx={{ mb: 1 }}>
          {props.title}
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ whiteSpace: 'pre-line' }}>
          {props.message}
        </Typography>
      </Paper>
    </Box>
  )
}