// Adds a visual mouse cursor overlay so movements are visible in videos/traces
// Source idea: Playwright docs / community gist
export async function installMouseOverlay(
  page: import("@playwright/test").Page
) {
  await page.addInitScript(() => {
    const style = document.createElement("style");
    style.innerHTML = `
      .__pw-mouse__ { pointer-events: none; position: fixed; left: 0; top: 0; z-index: 2147483647; width: 20px; height: 20px; background: rgba(0,0,0,0.7); border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.02s linear; }
      .__pw-mouse__.down { background: rgba(0,0,0,0.95); }
    `;
    document.head.appendChild(style);

    const dot = document.createElement("div");
    dot.className = "__pw-mouse__";
    document.body.appendChild(dot);

    window.addEventListener("mousemove", (e) => {
      dot.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
    });
    window.addEventListener("mousedown", () => dot.classList.add("down"));
    window.addEventListener("mouseup", () => dot.classList.remove("down"));
  });
}