1import React from 'react';
 2import Box from '@material-ui/core/Box';
 3import Icon from '@material-ui/core/Icon';
 4import Typography from '@material-ui/core/Typography';
 5import {makeStyles} from '@material-ui/core/styles';
 6import {useTranslation} from 'react-i18next';
 7
 8const Passenger = ({passenger, button}) => {
 9  const classes = useStyles();
10  const {t} = useTranslation();
11  return !!passenger ? (
12    <Box display="flex" flexDirection="row" alignItems="center" px={2} py={1}>
13      <Typography variant="body2" className={classes.name}>
14        {passenger}
15      </Typography>
16      {button}
17    </Box>
18  ) : (
19    <Box
20      display="flex"
21      flexDirection="row"
22      alignItems="center"
23      px={2}
24      py={1}
25      minHeight={46}
26    >
27      <Icon color="disabled" className={classes.icon}>
28        person
29      </Icon>
30      <Typography variant="body2">{t('car.passengers.empty')}</Typography>
31    </Box>
32  );
33};
34
35const useStyles = makeStyles(theme => ({
36  name: {
37    flexGrow: 1,
38  },
39  icon: {
40    marginRight: theme.spacing(2),
41  },
42}));
43
44export default Passenger;