import React, { forwardRef } from "react";
import PropTypes from "prop-types";
import { IconButton, Tooltip } from "@material-ui/core";

const ActionButton = forwardRef((props, _ref) => {
  const { action, resource } = props;
  return (
    <Tooltip
      id={`resource-${resource.resourceId}-${action.code}-tooltip`}
      title={action.tooltip}
    >
      <span id={`resource-${resource.resourceId}-${action.code}`}>
        <IconButton
          id={`resource-${resource.resourceId}-${action.code}`}
          size={"small"}
          onClick={(event) => action.effect(event, resource)}
        >
          <action.icon />
        </IconButton>
      </span>
    </Tooltip>
  );
});

ActionButton.propTypes = {
  action: PropTypes.object.isRequired,
  resource: PropTypes.object.isRequired
};

export default ActionButton;
