1  import Box from '@mui/material/Box';
 2  import Button from '@mui/material/Button';
 3  import {useTranslation} from 'react-i18next';
 4  import usePermissions from '../../hooks/usePermissions';
 5  
 6  interface Props {
 7    onAddSelf: () => void;
 8    onAddOther: () => void;
 9    registered: boolean;
10    variant: 'waitingList' | 'travel';
11    disabled?: boolean;
12  }
13  
14  const ADD_TO_LOCALE = {
15    waitingList: 'travel.passengers.add_to_waitingList',
16    travel: 'travel.passengers.add_to_travel',
17  };
18  
19  const 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  
69  const buttonStyle = {
70    py: 1,
71    px: 8,
72    md: {
73      px: 4,
74    },
75  };
76  
77  export default AddPassengerButtons;