import React, { memo } from 'react';
import { Handle, Position } from '@xyflow/react';

function FixedNodeCard({ data }) {
  const { icon, title, subtitle, kind } = data;
  const hasInput  = kind !== 'data';
  const hasOutput = kind !== 'result';

  return (
    <div className={`canvas-node canvas-node--fixed canvas-node--${kind}`}>
      {hasInput && <Handle type="target" position={Position.Left} isConnectable={false} />}
      <div className="canvas-node-title">
        <span className="canvas-node-icon">{icon}</span>
        <span>{title}</span>
      </div>
      {subtitle && <div className="canvas-node-subtitle">{subtitle}</div>}
      {hasOutput && <Handle type="source" position={Position.Right} isConnectable={false} />}
    </div>
  );
}

export default memo(FixedNodeCard);