1import {useTheme} from '@mui/material/styles';
 2import Box from '@mui/material/Box';
 3import Button from '@mui/material/Button';
 4import {useTranslation} from 'react-i18next';
 5
 6interface Props {
 7  getOnClickFunction: (addSelf: boolean) => () => void;
 8  canAddSelf: boolean;
 9  registered: boolean;
10  variant: 'waitingList' | 'travel';
11  disabled?: boolean;
12}
13
14const ADD_TO_LOCALE = {
15  waitingList: 'travel.passengers.add_to_waitingList',
16  travel: 'travel.passengers.add_to_travel',
17};
18
19const AddPassengerButtons = ({
20  getOnClickFunction,
21  canAddSelf,
22  registered,
23  variant,
24  disabled,
25}: Props) => {
26  const theme = useTheme();
27  const {t} = useTranslation();
28
29  const containerSx = {padding: theme.spacing(1), textAlign: 'center'};
30  const textSx = {
31    padding: theme.spacing(1, 8),
32    [theme.breakpoints.down(440)]: {
33      padding: theme.spacing(1, 4),
34    },
35  };
36
37  return (
38    <Box sx={containerSx}>
39      {canAddSelf && (
40        <Box sx={containerSx}>
41          <Button
42            sx={textSx}
43            variant="contained"
44            color="primary"
45            fullWidth
46            onClick={getOnClickFunction(true)}
47            disabled={registered}
48          >
49            {t(
50              registered
51                ? 'travel.passengers.registered'
52                : 'travel.passengers.add_me'
53            )}
54          </Button>
55        </Box>
56      )}
57      <Box sx={containerSx}>
58        <Button
59          sx={textSx}
60          variant="outlined"
61          color="primary"
62          fullWidth
63          onClick={getOnClickFunction(false)}
64          disabled={disabled}
65        >
66          {t(ADD_TO_LOCALE[variant])}
67        </Button>
68      </Box>
69    </Box>
70  );
71};
72
73export default AddPassengerButtons;