import { useEffect, useRef } from 'react';
import { MindMap, Node } from '@nice/mindmap';

const initialData: Node = {
  data: {
    text: "根节点"
  },
  children: []
};

export default function MindMapEditor(): JSX.Element {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const mindMap = new MindMap({
      el: containerRef.current,
      data: initialData
    });

    // 清理函数
    return () => {
      mindMap.destroy()
    };
  }, []);

  return <div ref={containerRef} className="mind-map-container h-screen" />;
}