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={showImage ? 0 : 8}
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            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        {t('event.no_travel.desc')}
46      </Typography>
47      <ShareEvent
48        color="primary"
49        sx={{
50          mt: 4,
51          backgroundColor: '#fff',
52        }}
53        title={`Caroster ${eventName}`}
54      />
55      <Box mt={4} display="flex" justifyContent="center">
56        <SupportCaroster />
57      </Box>
58    </Box>
59  );
60};
61
62export default NoCar;