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 AddPassengerButtons = ({
15  getOnClickFunction,
16  canAddSelf,
17  variant,
18  disabled,
19}: Props) => {
20  const theme = useTheme();
21  const {t} = useTranslation();
22
23  const containerSx = {padding: theme.spacing(1), textAlign: 'center'};
24  const textSx = {
25    padding: theme.spacing(1, 8),
26    [theme.breakpoints.down(440)]: {
27      padding: theme.spacing(1, 4),
28    },
29    '& > .material-icons': {
30      width: theme.spacing(3),
31      textAlign: 'center',
32      position: 'absolute',
33      left: theme.spacing(4),
34      marginRight: theme.spacing(1),
35      [theme.breakpoints.down(440)]: {
36        left: theme.spacing(1),
37      },
38    },
39  };
40
41  return (
42    <Box sx={containerSx}>
43      {canAddSelf && (
44        <Box sx={containerSx}>
45          <Button
46            sx={textSx}
47            variant="contained"
48            color="secondary"
49            fullWidth
50            onClick={getOnClickFunction(true)}
51            disabled={disabled}
52          >
53            <Icon>person_add</Icon>
54            {t('travel.passengers.add_me')}
55          </Button>
56        </Box>
57      )}
58      <Box sx={containerSx}>
59        <Button
60          sx={textSx}
61          variant="outlined"
62          color="primary"
63          fullWidth
64          onClick={getOnClickFunction(false)}
65          disabled={disabled}
66        >
67          <Icon>person_add</Icon>
68          {t(`travel.passengers.add_to_${variant}`)}
69        </Button>
70      </Box>
71    </Box>
72  );
73};
74
75export default AddPassengerButtons;