import { useEffect, useRef, useState } from 'react';

export const useDebouncedValue = <T extends string | object | number | Array<unknown>>(value: T, delay?: number) => {
    const timeoutRef = useRef<NodeJS.Timeout>();
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const debounce = (fn: () => void) => {
            return () => {
                if (timeoutRef.current) clearTimeout(timeoutRef.current);
                timeoutRef.current = setTimeout(fn, delay || 300);
            };
        };
        debounce(() => {
            setDebouncedValue(value);
        })();
    }, [value]);

    return debouncedValue;
};