import { $, Signal, useOnDocument, useStore } from "@builder.io/qwik";

export const useMouse = () => {
    const pos = useStore({ x: 0, y: 0 });

    useOnDocument("mousemove", $((event: MouseEvent) => {
        const { clientX, clientY } = event;
        pos.x = clientX;
        pos.y = clientY;
    }));
    
    return pos
}

export const useRelativeMouse = (ref: Signal<HTMLElement | undefined>) => {
    const pos = useStore({ x: 0, y: 0 });

    useOnDocument("mousemove", $((event: MouseEvent) => {
        const el = ref.value;
        if (!el) return;
        const rect = el.getBoundingClientRect();
        pos.x = event.clientX - rect.left;
        pos.y = event.clientY - rect.top;
    }));

    return pos;
};