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