import { ReactNode } from 'react';
import { Handle, Position, NodeProps } from '@xyflow/react';
import { AppNode } from '../types/graph';
import './CustomNode.css';

export default function CustomNode({ 
  data, 
  selected
}: NodeProps<AppNode>): ReactNode {
  const handleGenerate = (e: React.MouseEvent) => {
    e.stopPropagation();
  };
  
  return (
    <div className={`custom-node ${selected ? 'selected' : ''}`}>
      <div className="node-header">
        <span className="node-label" title={data.label}>{data.label}</span>
        <button className="gen-btn" onClick={handleGenerate} onDoubleClick={e => e.stopPropagation()}>生成配置</button>
      </div>

      {[Position.Top, Position.Bottom, Position.Right, Position.Left].map((position) => (
        (["target", "source"] as const).map((type) => (
          <Handle type={type} position={position} id={position} key={`${type}-${position}`} className="node-handle"/>
        ))
      ))}
    </div>
  );
}