import { Line } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useRef } from "react";
import type { Vec3 } from "./types";

export function RouteLine({ points, color = "#22d3ee", width = 2 }: { points: Vec3[]; color?: string; width?: number }) {
  const pulseRef = useRef<any>(null);
  useFrame((_, dt) => {
    if (pulseRef.current) pulseRef.current.material.dashOffset -= dt * 0.8;
  });
  if (points.length < 2) return null;
  return (
    <>
      <Line points={points} color={color} lineWidth={width} transparent opacity={0.35} />
      <Line ref={pulseRef} points={points} color={color} lineWidth={width + 1} dashed dashSize={4} gapSize={3} transparent opacity={0.9} />
    </>
  );
}
