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