import React, { memo } from 'react';
// import { ReactComponent as Icon } from "../../public/icons/outlined.svg";
import type { IDisplayComponent, INode } from '@qx/flow';
import './index.less';

const DisplayComponent: React.FC<DisplayComponentProps> = (props) => {
  const { node, nodes } = props;

  return (
    <div className="qx-flow-default-node">
      <div className="qx-flow-default-node__header">
        <span className="qx-flow-default-node__title">
          <span className="qx-flow-default-node__title--icon">
            {/* <Icon /> */}
          </span>
          <span className="qx-flow-default-node__title--name">{node.name}</span>
        </span>
      </div>
      <div className="qx-flow-default-node__content">
        {!node.data ? (
          <span className="qx-flow-start-node__button">设置入参</span>
        ) : (
          <span>节点配置内容</span>
        )}
      </div>
    </div>
  );
};

interface DisplayComponentProps extends IDisplayComponent {
  onChange?: (nodes: INode[]) => void;
}

export default memo(DisplayComponent);