import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import Icon from "@material-ui/core/Icon";
import { useTranslation } from "react-i18next";

const Passenger = ({ passenger, removePassenger }) => {
  const classes = useStyles();
  const { t } = useTranslation();
  if (!!passenger)
    return (
      <div className={classes.item}>
        <Typography variant="body2" className={classes.name}>
          {passenger}
        </Typography>
        <IconButton
          edge="end"
          size="small"
          onClick={() => removePassenger(passenger)}
        >
          <Icon>close</Icon>
        </IconButton>
      </div>
    );
  else return <div className={classes.item}>{t("car.passengers.empty")}</div>;
};

const useStyles = makeStyles((theme) => ({
  item: {
    padding: theme.spacing(1, 2),
    display: "flex",
    alignItems: "center",
    height: "46px",
  },
  name: {
    flexGrow: 1,
  },
}));

export default Passenger;