1  import {Box, Icon, IconButton} from '@mui/material';
 2  import usePermissions from '../../hooks/usePermissions';
 3  import useActions from './useActions';
 4  import {PassengerEntity, TravelEntity} from '../../generated/graphql';
 5  
 6  type Props = {
 7    passenger: PassengerEntity;
 8    travel: TravelEntity;
 9    setFocusPassenger: (passenger: PassengerEntity) => void;
10  };
11  
12  const 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  
48  export default PassengerActions;