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