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