export function determinePosition(
  canvasRect: DOMRect,
  relativeX: number,
  relativeY: number
): {
  top: number | "auto";
  left: number | "auto";
  right: number | "auto";
  bottom: number | "auto";
} {
  const centerX = canvasRect.width / 2;
  const centerY = canvasRect.height / 2;

  let position: {
    top: number | "auto";
    left: number | "auto";
    right: number | "auto";
    bottom: number | "auto";
  };

  if (relativeY < centerY) {
    if (relativeX < centerX) {
      
      position = {
        top: relativeY - 41.5,
        left: relativeX - 125,
        right: "auto",
        bottom: "auto",
      };
    } else {
      
      position = {
        top: relativeY - 41.5,
        right: canvasRect.width - relativeX - 125,
        left: "auto",
        bottom: "auto",
      };
    }
  } else {
    if (relativeX < centerX) {
      
      position = {
        bottom: canvasRect.height - relativeY - 41.5,
        left: relativeX - 125,
        right: "auto",
        top: "auto",
      };
    } else {
      
      position = {
        bottom: canvasRect.height - relativeY - 41.5,
        right: canvasRect.width - relativeX - 125,
        left: "auto",
        top: "auto",
      };
    }
  }

  return position;
}