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';
 6import SupportCaroster from '../SupportCaroster';
 7
 8interface Props {
 9  eventName: string;
10  title: string;
11  showImage?: boolean;
12}
13
14const NoCar = ({eventName, title, showImage}: Props) => {
15  const {t} = useTranslation();
16  const theme = useTheme();
17
18  return (
19    <Box
20      my={4}
21      mx="auto"
22      pb={16}
23      mt={9}
24      maxWidth="100%"
25      width={340}
26    >
27      <Typography variant="h6" align="center" color="textSecondary">
28        {title}
29      </Typography>
30      {showImage && (
31        <Box
32          component="img"
33          sx={{
34            display: 'block',
35            margin: '0 auto',
36            width: '100%',
37            height: 'auto',
38
39            [theme.breakpoints.down('md')]: {
40              width: '50%',
41            },
42          }}
43          src="/assets/car.png"
44        />
45      )}
46      <Typography sx={{whiteSpace: 'pre-line', mt: 4}} color="textSecondary">
47        {t('event.no_travel.desc')}
48      </Typography>
49      <ShareEvent
50        color="primary"
51        sx={{
52          mt: 4,
53          backgroundColor: '#fff',
54        }}
55        title={`Caroster ${eventName}`}
56      />
57      <Box mt={4} display="flex" justifyContent="center">
58        <SupportCaroster />
59      </Box>
60    </Box>
61  );
62};
63
64export default NoCar;