'use client';

import { useState, useEffect } from 'react';

/**
 * Debounce a value by a given delay.
 *
 * @param value  The raw (fast-changing) value, e.g. a search input string.
 * @param delay  Debounce delay in milliseconds (default 400ms).
 * @returns      The debounced value – only updates after the user stops
 *               changing `value` for `delay` ms.
 *
 * @example
 * const [search, setSearch] = useState('');
 * const debouncedSearch = useDebounce(search, 400);
 *
 * // use `debouncedSearch` in your query key / API call
 */
export function useDebounce<T>(value: T, delay = 400): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}