1import {ListItem, List, styled, useTheme} from '@mui/material';
 2import Passenger from './Passenger';
 3import {PassengerEntity, TravelEntity} from '../../generated/graphql';
 4import {ReactNode} from 'react';
 5
 6const PREFIX = 'PassengersList';
 7
 8const classes = {
 9  container: `${PREFIX}-container`,
10  passenger: `${PREFIX}-passenger`,
11};
12
13const Root = styled('div')(({theme}) => ({
14  [`&.${classes.container}`]: {
15    padding: theme.spacing(0, 0, 1, 0),
16  },
17
18  [`& .${classes.passenger}`]: {
19    paddingRight: theme.spacing(12),
20  },
21}));
22
23interface Props {
24  passengers: PassengerEntity[];
25  travel?: TravelEntity;
26  onClickPassenger?: (passengerId: string) => void;
27  Actions?: (props: {passenger: PassengerEntity}) => ReactNode;
28}
29
30const PassengersList = (props: Props) => {
31  const {passengers, onClickPassenger, travel, Actions} = props;
32  const theme = useTheme();
33
34  return (
35    <Root sx={{padding: theme.spacing(0, 0, 1, 0)}}>
36      <List disablePadding>
37        {!!passengers &&
38          passengers.map((passenger, index) => (
39            <ListItem
40              key={index}
41              button={!!onClickPassenger}
42              onClick={() => onClickPassenger?.(passenger.id)}
43            >
44              <Passenger
45                key={index}
46                passenger={{
47                  id: passenger.id,
48                  attributes: {...passenger.attributes, travel: {data: travel}},
49                }}
50                isTravel={!!travel}
51                Actions={Actions}
52              />
53            </ListItem>
54          ))}
55      </List>
56    </Root>
57  );
58};
59
60export default PassengersList;