Action = ({
  name,
  block,
  action_label,
  action_style,
  action_icon,
  action_size,
  action_bgcol,
  action_bordercol,
  action_textcol,
}) => {
  const {
    selected,
    connectors: { connect, drag },
  } = useNode((node) => ({ selected: node.events.selected }));
  /**
   * @type {object}
   */
  return (
    <button
      className={`btn ${action_style || "btn-primary"} ${action_size || ""} ${
        selected ? "selected-node" : ""
      } ${block ? "d-block" : ""}`}
      ref={(dom) => connect(drag(dom))}
      style={
        action_style === "btn-custom-color"
          ? {
              backgroundColor: action_bgcol || "#000000",
              borderColor: action_bordercol || "#000000",
              color: action_textcol || "#000000",
            }
          : action_style === "on_page_load"
            ? {
                border: "1px red dashed",
              }
            : {}
      }
    >
      <DynamicFontAwesomeIcon icon={action_icon} className="me-1" />
      {action_label || name}
    </button>
  );
}
@param {object} props
@param {string} props.name
@param {string} props.block
@param {string} props.action_label
@param {string} props.action_style
@param {string} props.action_icon
@param {string} props.action_size
@param {string} props.action_bgcol
@param {string} props.action_bordercol
@param {string} props.action_textcol
@returns {span|btn}
@category saltcorn-builder
@subcategory components
@namespace