import { useMemo } from 'react';
import * as THREE from 'three';

/**
 * A thin solid dimension line between two points — replaces drei <Line> (Line2)
 * with a pure primitive cylinder to avoid the LineMaterial prop-handling crash.
 */
export default function DimLine({ start = [0, 0, 0], end = [0, 1, 0], color = '#22d3ee', radius = 0.9, dashed = false }) {
  const { position, length, quaternion } = useMemo(() => {
    const s = new THREE.Vector3(...start);
    const e = new THREE.Vector3(...end);
    const dir = new THREE.Vector3().subVectors(e, s);
    const len = dir.length() || 0.001;
    const mid = new THREE.Vector3().addVectors(s, e).multiplyScalar(0.5);
    const q = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.normalize());
    return { position: [mid.x, mid.y, mid.z], length: len, quaternion: [q.x, q.y, q.z, q.w] };
  }, [start, end]);

  return (
    <mesh position={position} quaternion={quaternion} raycast={() => null}>
      <cylinderGeometry args={[radius, radius, length, 6]} />
      <meshBasicMaterial color={color} transparent opacity={0.9} depthWrite={false} />
    </mesh>
  );
}