import React, { useState } from 'react';

//import useDebouce as a named export
import { useDebounce } from 'use-deeebounce';

export const Input = () => {
  const [inputValue, setInputValue] = useState('');

  // Set the duration for debouncing and provide the hook with a string value to debounce.
  const debouncedInputValue = useDebounce(inputValue, 5 * 100);

  return (
    <div>
      <label>Input:</label>
      <input type="text" value={inputValue} onChange={(e)=>setInputValue(e.target.value)} />
      {/* see the debounced query here */}
      <p>Debounced Value: {debouncedInputValue}</p>
    </div>
  );
};