import { useEffect, useRef } from "react";
import { getFlowchartNodesByAi } from "@repo/flowchart-render";
import { Graph } from "@antv/x6";

export default function Flowchart(props: { data: any }) {
  const containerRef = useRef<HTMLDivElement>(null);

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

    const graph = new Graph({
      container: container,
      width: container.clientWidth,
      height: container.clientHeight,
      grid: true,
      background: {
        color: "#f5f5f5",
      },
    });

    const nodes = getFlowchartNodesByAi(props.data);
    graph.fromJSON(nodes);
    graph.centerContent();

    return () => {
      graph.dispose();
    };
  }, []);

  return (
    <div className="w-full h-full relative">
      <div className="w-full h-full" ref={containerRef} />
    </div>
  );
}
