import { FC } from 'react';

import Alert from '@material-hu/mui/Alert';
import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

export type EventsEmptyProps = {
  message: string;
  isUserSite?: boolean;
};

export const EventsEmpty: FC<EventsEmptyProps> = props => {
  const { message, isUserSite = false } = props;

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
        mt: '60px',
      }}
    >
      {isUserSite && (
        <Alert
          severity="info"
          sx={{ width: '600px' }}
        >
          <Typography>{message}</Typography>
        </Alert>
      )}
      {!isUserSite && <Typography color="secondary">{message}</Typography>}
    </Box>
  );
};

export default EventsEmpty;