import { useDebounceCallback } from "~/hooks/useDebounceCallback";
import { useState } from "react";
 
function Component() {
  const [inputValue, setInputValue] = useState<string>("");
 
  const debouncedLog = useDebounceCallback((value: string) => {
    console.log("Debounced Input Value:", value);
  }, 500);
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    setInputValue(value);
    debouncedLog(value);
  };
 
  return (
    <div>
      <h2>Debounced Callback Example</h2>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="Type something..."
      />
    </div>
  );
}

function useDebounceCallback<T extends (...args: any[]) => void>(
  callback: T,
  delay: number,
): (...args: Parameters<T>) => void;