import { memo, useCallback } from "react";
import React from "react";

import { ListItemIcon, ListItemText, MenuItem } from "@mui/material";

import { ApiOperation } from "../../api";
import Logo from "../Logo";

export interface ActionMenuItemProps {
  operation: ApiOperation;
  onAction: (operations: ApiOperation) => Promise<void>;
}

export const ActionMenuItem: React.FC<ActionMenuItemProps> = ({ operation, onAction }) => {
  const handleClick = useCallback(() => {
    onAction(operation);
  }, [operation, onAction]);

  return (
    <MenuItem onClick={handleClick}>
      {operation.component?.icon && (
        <ListItemIcon sx={{ width: 20 }}>
          <Logo src={operation.component.icon} />
        </ListItemIcon>
      )}
      <ListItemText>{operation.component?.title ?? operation.summary ?? operation.id}</ListItemText>
    </MenuItem>
  );
};

export default memo(ActionMenuItem);