// File: frontend/app/workflow/components/OutputNode.tsx
// Description: 自定义结束节点组件

import React, { memo } from 'react';
import { Handle, Position } from 'reactflow';
import { CheckCircle } from 'lucide-react';
import type { OutputNodeData, CustomNodeProps } from './types'; // 导入类型

const OutputNodeComponent = ({ data }: CustomNodeProps<OutputNodeData>) => {
  return (
    <div className="react-flow__node-default bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700 p-4 rounded-lg shadow-md w-40">
      <Handle
        type="target"
        position={Position.Top}
        id="output-target"
        className="w-3 h-3 !bg-blue-500"
      />
      <div className="flex items-center gap-2 mb-2">
        <CheckCircle size={16} className="text-blue-700 dark:text-blue-300" />
        <strong className="text-blue-800 dark:text-blue-200">{data.label || '结束流程'}</strong>
      </div>
    </div>
  );
};

OutputNodeComponent.displayName = 'OutputNode';
export const OutputNode = memo(OutputNodeComponent);