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}
14
15const Passenger = (props: Props) => {
16  const {passenger, button} = props;
17  const {t} = useTranslation();
18  const classes = useStyles();
19
20  if (passenger)
21    return (
22      <>
23        <ListItemText primary={passenger.name} />
24        {button}
25      </>
26    );
27  else
28    return (
29      <>
30        <ListItemAvatar>
31          <ListItemIcon color="disabled">
32            <Icon>person</Icon>
33          </ListItemIcon>
34        </ListItemAvatar>
35        <ListItemText
36          primary={t('travel.passengers.empty')}
37          classes={{
38            root: classes.empty,
39          }}
40        />
41      </>
42    );
43};
44
45const useStyles = makeStyles(theme => ({
46  empty: {
47    color: theme.palette.text.secondary,
48  },
49}));
50
51export default Passenger;