1import Button from '@mui/material/Button';
 2import Typography from '@mui/material/Typography';
 3import {useTheme} from '@mui/material/styles';
 4import {useTranslation} from 'next-i18next';
 5import {useRouter} from 'next/router';
 6import Box from '@mui/material/Box';
 7import ShareEvent from '../ShareEvent';
 8import SupportCaroster from '../SupportCaroster';
 9
10interface Props {
11  eventName: string;
12  title: string;
13  isCarosterPlus: string;
14  showImage?: boolean;
15}
16
17const NoCar = ({eventName, title, isCarosterPlus, showImage}: Props) => {
18  const {t} = useTranslation();
19  const theme = useTheme();
20  const router = useRouter();
21  const {uuid} = router.query;
22
23  return (
24    <Box my={4} mx="auto" pb={16} mt={9} maxWidth="100%" width={340}>
25      <Typography variant="h6" align="center" color="textSecondary">
26        {title}
27      </Typography>
28      {showImage && (
29        <Box
30          component="img"
31          sx={{
32            display: 'block',
33            margin: '0 auto',
34            width: '100%',
35            height: 'auto',
36
37            [theme.breakpoints.down('md')]: {
38              width: '50%',
39            },
40          }}
41          src="/assets/car.png"
42        />
43      )}
44      <Typography sx={{whiteSpace: 'pre-line', mt: 4}} color="textSecondary">
45        {isCarosterPlus
46          ? t('event.no_travel.plus.desc')
47          : t('event.no_travel.desc')}
48      </Typography>
49      {!isCarosterPlus && (
50        <ShareEvent
51          color="primary"
52          sx={{
53            mt: 4,
54            backgroundColor: '#fff',
55          }}
56          title={`Caroster ${eventName}`}
57        />
58      )}
59      {isCarosterPlus && (
60        <Box textAlign="center" width={1} mt={4}>
61          <Button
62            variant="outlined"
63            color="primary"
64            onClick={() => router.push(`/e/${uuid}/alerts`)}
65          >
66            {t('event.no_travel.plus.action')}
67          </Button>
68        </Box>
69      )}
70      <Box mt={4} display="flex" justifyContent="center">
71        <SupportCaroster />
72      </Box>
73    </Box>
74  );
75};
76
77export default NoCar;