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