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