1import {ReactNode} from 'react';
 2import {useTheme} from '@mui/material/styles';
 3import ListItemAvatar from '@mui/material/ListItemAvatar';
 4import ListItemIcon from '@mui/material/ListItemIcon';
 5import ListItemText from '@mui/material/ListItemText';
 6import Icon from '@mui/material/Icon';
 7import {useTranslation} from 'react-i18next';
 8import {PassengerEntity} from '../../generated/graphql';
 9import useProfile from '../../hooks/useProfile';
10import Chip from '@mui/material/Chip';
11import Box from '@mui/material/Box';
12
13interface Props {
14  passenger?: PassengerEntity;
15  button?: ReactNode;
16  isTravel?: boolean;
17}
18
19const Passenger = (props: Props) => {
20  const {passenger, button, isTravel} = props;
21  const theme = useTheme();
22  const {t} = useTranslation();
23
24  const {userId} = useProfile();
25
26  const isUser = `${userId}` === passenger?.attributes.user?.data?.id;
27  const showLocation = isTravel ? false : passenger.attributes.location;
28
29  if (passenger) {
30    return (
31      <Box>
32        <ListItemText
33          primary={
34            <>
35              {passenger.attributes.name}
36              {isUser && (
37                <Chip
38                  sx={{marginLeft: theme.spacing(2)}}
39                  label={t('generic.me')}
40                  variant="outlined"
41                />
42              )}
43            </>
44          }
45          secondary={showLocation}
46        />
47        {button}
48      </Box>
49    );
50  } else
51    return (
52      <>
53        <ListItemAvatar>
54          <ListItemIcon color="disabled">
55            <Icon>person</Icon>
56          </ListItemIcon>
57        </ListItemAvatar>
58        <ListItemText
59          primary={t('travel.passengers.empty')}
60          sx={{color: theme.palette.text.secondary}}
61        />
62      </>
63    );
64};
65
66export default Passenger;