1import {
 2  Box,
 3  Chip,
 4  Icon,
 5  IconButton,
 6  ListItem,
 7  ListItemText,
 8} from '@mui/material';
 9import {TripAlertEntity} from '../../generated/graphql';
10import {useTranslation} from 'next-i18next';
11import RadarIcon from '@mui/icons-material/Radar';
12import useProfile from '../../hooks/useProfile';
13import theme from '../../theme';
14
15type Props = {
16  tripAlert: TripAlertEntity;
17  onClick: () => void;
18  isLast?: boolean;
19};
20
21const WaitingListItem = ({tripAlert, onClick, isLast}: Props) => {
22  const {t} = useTranslation();
23  const {userId} = useProfile();
24
25  const user = tripAlert.attributes.user?.data.attributes;
26  const userName = `${user.firstName} ${user.lastName}`;
27  const isLoggedUser = `${userId}` === tripAlert.attributes.user?.data.id;
28
29  return (
30    <ListItem divider={!isLast}>
31      <ListItemText
32        primary={
33          <>
34            {userName}
35            {isLoggedUser && (
36              <Chip
37                sx={{marginLeft: 1}}
38                label={t('generic.me')}
39                variant="outlined"
40                size="small"
41              />
42            )}
43          </>
44        }
45        secondary={
46          <>
47            {tripAlert.attributes.address}
48            <Box display="flex" alignItems="center" gap={0.5}>
49              <RadarIcon fontSize="small" />
50              {tripAlert.attributes.radius} km
51            </Box>
52          </>
53        }
54      />
55      <IconButton
56        onClick={onClick}
57        color="primary"
58        sx={{
59          borderRadius: 1,
60          padding: 0,
61          fontSize: theme.typography.button,
62        }}
63      >
64        {t('passenger.actions.place')}
65        <Icon>chevron_right</Icon>
66      </IconButton>
67    </ListItem>
68  );
69};
70
71export default WaitingListItem;