import type { Ref } from 'vue';
import { onMounted, onUnmounted } from 'vue';

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

    onMounted(() => {
        document.addEventListener('click', onClick);
    });

    onUnmounted(() => {
        document.removeEventListener('click', onClick);
    });
};