import { onMounted, onBeforeUnmount, Ref } from "vue";

export function useClickOutside(
    targetRef: Ref<HTMLElement | null>,
    callback: (event: MouseEvent) => void
) {
    const handleClick = (event: MouseEvent) => {
        const target = targetRef.value;
        if (target && !target.contains(event.target as Node)) {
            callback(event);
        }
    };

    onMounted(() => {
        document.addEventListener("mousedown", handleClick);
    });

    onBeforeUnmount(() => {
        document.removeEventListener("mousedown", handleClick);
    });
}