import { Coordinates } from "~/types";
import { PhAngle } from "./PhAngle";

interface ComponentProps {
  position: Coordinates;
  referencePosition: Coordinates;
}

export default function RotatableAngle({ position, referencePosition }: ComponentProps) {
  // Calculate angle between points
  const getRotationAngle = () => {
    const deltaX = referencePosition.x - position.x;
    const deltaY = referencePosition.y - position.y;
    // Convert from radians to degrees and adjust for SVG orientation
    const degrees = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
    return degrees - 135; // Adjust baseline rotation to point right
  };

  return (
    <PhAngle
      className="absolute scale-125"
      style={{
        transform: `rotate(${getRotationAngle()}deg)`,
        top: '-4px',
        left: '-12px'
      }}
    />
  );
};