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

  // Initialize position with default values
  let position: {
    top: number | "auto";
    left: number | "auto";
    right: number | "auto";
    bottom: number | "auto";
  };

  if (relativeY < centerY) {
    // Top half
    if (relativeX < centerX) {
      // Left side
      position = {
        top: relativeY,
        left: relativeX,
        right: "auto",
        bottom: "auto",
      };
    } else {
      // Right side
      position = {
        top: relativeY,
        right: canvasRect.width - relativeX,
        left: "auto",
        bottom: "auto",
      };
    }
  } else {
    // Bottom half
    if (relativeX < centerX) {
      // Left side
      position = {
        bottom: canvasRect.height - relativeY,
        left: relativeX,
        right: "auto",
        top: "auto",
      };
    } else {
      // Right side
      position = {
        bottom: canvasRect.height - relativeY,
        right: canvasRect.width - relativeX,
        left: "auto",
        top: "auto",
      };
    }
  }

  return position;
}