1import {Box, Paper, Typography} from '@mui/material';
 2import {useTranslation} from 'next-i18next';
 3import BasicAction from './BasicAction';
 4import PlusAction from './PlusAction';
 5import {Module} from '../../generated/graphql';
 6
 7type Props = {
 8  type: 'basic' | 'plus';
 9  moduleConfig?: Module;
10};
11
12const EventTypeCard = (props: Props) => {
13  const {type, moduleConfig} = props;
14  const {t} = useTranslation();
15
16  return (
17    <Box
18      component={Paper}
19      p={2}
20      width={1}
21      display="flex"
22      flexDirection="column"
23      justifyContent="space-between"
24    >
25      <Typography color="primary" variant="h5">
26        {t(`event.creation.${type}.title`)}
27      </Typography>
28      <Typography color="textSecondary">
29        {t(`event.creation.${type}.subtitle`)}
30      </Typography>
31      {type === 'basic' && (
32        <Box display="flex" alignItems="baseline" pt={3.75} pb={2}>
33          <Typography fontSize={64} lineHeight={1}>
34            0
35          </Typography>
36          <Typography fontSize={24} lineHeight={1}>
37            €
38          </Typography>
39        </Box>
40      )}
41      {type === 'plus' && (
42        <Box py={2}>
43          <Typography fontSize={14} lineHeight={1}>
44            {t`event.creation.plus.fromPrice`}
45          </Typography>
46          <Box display="flex" alignItems="baseline">
47            <Typography fontSize={64} lineHeight={1}>
48              {moduleConfig?.caroster_plus_price}
49            </Typography>
50            <Typography fontSize={24} lineHeight={1}>
51              €
52            </Typography>
53          </Box>
54        </Box>
55      )}
56      <Typography color="textSecondary" pb={3}>
57        {t(`event.creation.${type}.description`)}
58      </Typography>
59      {type === 'basic' && <BasicAction />}
60      {type === 'plus' && (
61        <PlusAction paymentLink={moduleConfig?.caroster_plus_payment_link} />
62      )}
63    </Box>
64  );
65};
66
67export default EventTypeCard;