import React from 'react';
import styles from '@/pages/flowEditor/node/style/base.module.less';
import NodeContent from '@/pages/flowEditor/components/nodeContent';
import { useStore } from '@xyflow/react';

interface EndNodeData {
  title?: string;
  parameters?: {
    dataIns?: any[];
    dataOuts?: any[];
    apiIns?: any[];
    apiOuts?: any[];
  };
  showFooter?: boolean;

  [key: string]: any;
}

const EndNode = ({ data, id }: { data: EndNodeData; id: string }) => {
  const title = data.title || '结束';

  // 获取节点选中状态 - 适配React Flow v12 API
  const isSelected = useStore((state) => 
    state.nodeLookup.get(id)?.selected || false
  );

  return (
    <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
      <div className={styles['node-header']} style={{ backgroundColor: '#c05144' }}>
        {title}
      </div>

      <NodeContent data={{ ...data, type: 'end' }} />
    </div>
  );
};

export default EndNode;