1import Typography from '@mui/material/Typography';
 2import {useTheme} from '@mui/material/styles';
 3import Box from '@mui/material/Box';
 4import {useTranslation} from 'react-i18next';
 5import ShareEvent from '../ShareEvent';
 6
 7interface Props {
 8  eventName: string;
 9  title: string;
10  image?: boolean;
11}
12
13const url = typeof window !== 'undefined' ? window.location.href : '';
14
15const NoCar = ({eventName, title, image}: Props) => {
16  const {t} = useTranslation();
17  const theme = useTheme();
18
19  return (
20    <Box
21      sx={{
22        margin: `${theme.spacing(4)} auto`,
23        marginTop: image ? 0 : theme.spacing(8),
24        width: '280px',
25        maxWidth: '100%',
26        paddingBottom: theme.spacing(16),
27        textAlign: 'center',
28      }}
29    >
30      <Typography variant="h5">{title}</Typography>
31      <Box
32        component="img"
33        sx={{
34          width: image ? '100%' : 0,
35          height: image ? 'auto' : theme.spacing(6),
36          [theme.breakpoints.down('md')]: {
37            width: image ? '50%' : 0,
38          },
39        }}
40        src="/assets/car.png"
41      />
42      <Typography>{t('event.no_travel.desc')}</Typography>
43      <ShareEvent
44        color="primary"
45        sx={{marginTop: theme.spacing(6), backgroundColor: '#fff'}}
46        title={`Caroster ${eventName}`}
47        url={`${url}`}
48      />
49    </Box>
50  );
51};
52
53export default NoCar;