1import React from 'react';
 2import {makeStyles} from '@material-ui/core/styles';
 3import Typography from '@material-ui/core/Typography';
 4import IconButton from '@material-ui/core/IconButton';
 5import Icon from '@material-ui/core/Icon';
 6import {useTranslation} from 'react-i18next';
 7
 8const Passenger = ({passenger, removePassenger}) => {
 9  const classes = useStyles();
10  const {t} = useTranslation();
11  if (!!passenger)
12    return (
13      <div className={classes.item}>
14        <Typography variant="body2" className={classes.name}>
15          {passenger}
16        </Typography>
17        <IconButton edge="end" size="small" onClick={removePassenger}>
18          <Icon>close</Icon>
19        </IconButton>
20      </div>
21    );
22  else return <div className={classes.item}>{t('car.passengers.empty')}</div>;
23};
24
25const useStyles = makeStyles(theme => ({
26  item: {
27    padding: theme.spacing(1, 2),
28    display: 'flex',
29    alignItems: 'center',
30    height: '46px',
31  },
32  name: {
33    flexGrow: 1,
34  },
35}));
36
37export default Passenger;