import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

export type FallbackMessageProps = {
  message: string;
};

const FallbackMessage: FC<FallbackMessageProps> = props => {
  const { message } = props;
  return (
    <Stack
      sx={{
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
        background: theme => theme.palette.base?.grey[800],
      }}
    >
      <Typography
        variant="globalS"
        color="new.text.neutral.inverted"
      >
        {message}
      </Typography>
    </Stack>
  );
};

export default FallbackMessage;