import { useEffect, useMemo } from "react";
import { BufferGeometry, Float32BufferAttribute, DoubleSide } from "three";
import navigation from "../../server/generated/arena-navigation.json";

export function ArenaNavigationSurface({ stageId }: { stageId: string }) {
  const geometry = useMemo(() => {
    const mesh = new BufferGeometry();
    mesh.setAttribute("position", new Float32BufferAttribute((navigation as Record<string, number[]>)[stageId] ?? [], 3));
    mesh.computeVertexNormals();
    return mesh;
  }, [stageId]);
  useEffect(() => () => geometry.dispose(), [geometry]);
  return <mesh geometry={geometry} position={[0, -.12, 0]} receiveShadow>
    <meshStandardMaterial color="#465142" side={DoubleSide} roughness={.92} />
  </mesh>;
}