import { useEffect, useState, useRef } from "react";
import ForceGraph3D from "react-force-graph-3d";
import graphData from "../data.json";

export default function GraphComponent({ selectedCategory }) {
  const fgRef = useRef();

  // Filter nodes based on category
  const filteredNodes = selectedCategory
    ? graphData.nodes.map((node) => ({
        ...node,
        muted: node.category !== selectedCategory,
      }))
    : graphData.nodes.map((node) => ({ ...node, muted: false }));

  return (
    <ForceGraph3D
      ref={fgRef}
      graphData={{
        nodes: filteredNodes,
        links: graphData.links,
      }}
      nodeCanvasObject={(node, ctx) => {
        const label = node.name;
        ctx.font = "10px Sans-Serif";
        ctx.fillStyle = node.muted ? "rgba(255,255,255,0.2)" : "white"; // Dim muted nodes
        ctx.fillText(label, node.x, node.y);
      }}
      linkDirectionalParticles={2}
      linkDirectionalParticleSpeed={0.005}
    />
  );
}
