import { memo } from 'react';
import { NodeProps } from 'reactflow';
import { BaseNode } from './BaseNode';
import { ConstraintNodeData } from '../../../lib/canvas/schema';

function ConstraintNodeComponent(props: NodeProps<ConstraintNodeData>) {
  const { data } = props;
  return (
    <BaseNode {...props} icon={<span>🚧</span>} color="text-orange-600" colorBg="bg-orange-50">
      {data.name && <div>{data.name}</div>}
      {data.operator && data.value !== undefined && (
        <div className="text-xs text-gray-400">
          {data.operator} {data.value}
        </div>
      )}
    </BaseNode>
  );
}
export const ConstraintNode = memo(ConstraintNodeComponent);