1import {Box, Icon, IconButton} from '@mui/material';
 2import usePermissions from '../../hooks/usePermissions';
 3import useActions from './useActions';
 4import {PassengerEntity, TravelEntity} from '../../generated/graphql';
 5
 6type Props = {
 7  passenger: PassengerEntity;
 8  travel: TravelEntity;
 9  setFocusPassenger: (passenger: PassengerEntity) => void;
10};
11
12const PassengerActions = (props: Props) => {
13  const {passenger, travel, setFocusPassenger} = props;
14  const {
15    userPermissions: {canDeletePassenger, canSeePassengerDetails},
16  } = usePermissions();
17  const actions = useActions({travel});
18
19  return (
20    <Box display="flex">
21      {canDeletePassenger(passenger) && {
22          id: passenger.id,
23          attributes: {
24            ...passenger.attributes,
25            travel: {data: travel},
26          },
27        } && (
28          <IconButton
29            color="primary"
30            onClick={() => actions.removePassengerFromTravel(passenger.id)}
31            tabIndex={-1}
32          >
33            <Icon>delete_outline</Icon>
34          </IconButton>
35        )}
36      {canSeePassengerDetails(passenger) && (
37        <IconButton
38          color="primary"
39          onClick={() => setFocusPassenger(passenger)}
40        >
41          <Icon>info_outlined</Icon>
42        </IconButton>
43      )}
44    </Box>
45  );
46};
47
48export default PassengerActions;