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