import React, { memo } from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { FiSettings, FiActivity, FiLock } from 'react-icons/fi';
import { getComponentLabel } from '../../utils/componentUtils';
import NodeWrapper from './NodeWrapper';
import type { BaseNodeData } from '../../types/settings';

interface CustomNodeData extends BaseNodeData {
  configured?: boolean;
}

const CustomNode = memo<NodeProps<CustomNodeData>>(({ data, selected }) => {
  return (
    <NodeWrapper data={data} selected={selected} nodeClass="action-node">
      <Handle
        type="target"
        position={Position.Top}
        className="node-handle"
        id="input"
      />

      <div className="node-header">
        <FiActivity className="node-icon" />
        <span className="node-type">{getComponentLabel('element')}</span>
        {data.locked && <FiLock className="lock-icon" />}
      </div>

      <div className="node-body">
        <div className="node-label">{data.label}</div>
        {data.plugin && (
          <div className="node-plugin">{data.plugin}</div>
        )}
      </div>

      {data.configured && (
        <div className="node-status">
          <FiSettings className="configured-icon" />
        </div>
      )}

      <Handle
        type="source"
        position={Position.Bottom}
        className="node-handle"
        id="output"
      />
    </NodeWrapper>
  );
});

CustomNode.displayName = 'CustomNode';

export default CustomNode;
