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
18          edge="end"
19          size="small"
20          onClick={() => removePassenger(passenger)}
21        >
22          <Icon>close</Icon>
23        </IconButton>
24      </div>
25    );
26  else return <div className={classes.item}>{t("car.passengers.empty")}</div>;
27};
28
29const useStyles = makeStyles((theme) => ({
30  item: {
31    padding: theme.spacing(1, 2),
32    display: "flex",
33    alignItems: "center",
34    height: "46px",
35  },
36  name: {
37    flexGrow: 1,
38  },
39}));
40
41export default Passenger;