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