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

interface NodeProps {
  data: {
    label: string;
  };
  isConnectable: boolean;
}

const CustomNode: React.FC<NodeProps> = ({ data, isConnectable }) => {
  return (
    <>
      <Handle
        type="target"
        position={Position.Top}
        onConnect={(params) => console.log('handle onConnect', params)}
        isConnectable={isConnectable}
      />
      <div
        style={{
          width: 275,
          padding: 10,
          border: '1px solid #1a192b',
          background: '#fff',
        }}
      >
        {data.label}
      </div>
      <Handle
        type="source"
        position={Position.Bottom}
        id="yes"
        style={{ bottom: 0, left: 45, background: '#555' }}
        isConnectable={isConnectable}
      />
      <div
        style={{
          position: 'absolute',
          left: 30,
          bottom: -14,
          background: '#000',
          color: '#fff',
          fontSize: 11,
          paddingLeft: 5,
          paddingRight: 5,
          paddingTop: 3,
          paddingBottom: 3,
          borderRadius: 5,
        }}
      >
        Yes
      </div>
      <Handle
        type="source"
        position={Position.Bottom}
        id="no"
        style={{ bottom: 0, left: 240, background: '#555' }}
        isConnectable={isConnectable}
      />
      <div
        style={{
          position: 'absolute',
          right: 25,
          bottom: -10,
          background: '#000',
          color: '#fff',
          paddingLeft: 5,
          paddingRight: 5,
          paddingTop: 3,
          paddingBottom: 3,
          fontSize: 11,
          borderRadius: 5,
        }}
      >
        No
      </div>
    </>
  );
};

export default memo(CustomNode);
