1import {ReactNode} from 'react';
 2import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 3import ListItemIcon from '@material-ui/core/ListItemIcon';
 4import ListItemText from '@material-ui/core/ListItemText';
 5import Icon from '@material-ui/core/Icon';
 6import {makeStyles} from '@material-ui/core/styles';
 7import {useTranslation} from 'react-i18next';
 8import {ComponentPassengerPassenger} from '../../generated/graphql';
 9
10interface Props {
11  passenger?: ComponentPassengerPassenger;
12  button?: ReactNode;
13  isVehicle?: boolean;
14}
15
16const Passenger = (props: Props) => {
17  const {passenger, button, isVehicle} = props;
18  const {t} = useTranslation();
19  const classes = useStyles();
20
21  const showLocation = isVehicle ? false : passenger.location
22
23  if (passenger) {
24    return (
25      <>
26        <ListItemText
27          primary={passenger.name}
28          secondary={showLocation}
29        />
30        {button}
31      </>
32    );
33  } else
34    return (
35      <>
36        <ListItemAvatar>
37          <ListItemIcon color="disabled">
38            <Icon>person</Icon>
39          </ListItemIcon>
40        </ListItemAvatar>
41        <ListItemText
42          primary={t('travel.passengers.empty')}
43          classes={{
44            root: classes.empty,
45          }}
46        />
47      </>
48    );
49};
50
51const useStyles = makeStyles(theme => ({
52  empty: {
53    color: theme.palette.text.secondary,
54  },
55}));
56
57export default Passenger;