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