1import {ListItem, List, Box} from '@mui/material';
 2import Passenger from './Passenger';
 3import {PassengerEntity, TravelEntity} from '../../generated/graphql';
 4import {ReactNode} from 'react';
 5
 6interface Props {
 7  passengers: PassengerEntity[];
 8  travel?: TravelEntity;
 9  onClickPassenger?: (passengerId: string) => void;
10  Actions?: (props: {passenger: PassengerEntity}) => ReactNode;
11}
12
13const PassengersList = (props: Props) => {
14  const {passengers, onClickPassenger, travel, Actions} = props;
15
16  return (
17    <Box pb={1}>
18      <List disablePadding>
19        {passengers?.map((passenger, index) => (
20          <ListItem
21            key={index}
22            button={!!onClickPassenger}
23            onClick={() => onClickPassenger?.(passenger.id)}
24          >
25            <Passenger
26              key={index}
27              passenger={{
28                id: passenger.id,
29                attributes: {...passenger.attributes, travel: {data: travel}},
30              }}
31              isTravel={!!travel}
32              Actions={Actions}
33            />
34          </ListItem>
35        ))}
36      </List>
37    </Box>
38  );
39};
40
41export default PassengersList;