import * as React from "react"
 
import { useThrottle } from "@/hooks/use-throttle"
 
export function Component() {
  const [val, setVal] = React.useState("")
  const throttledValue = useThrottle(val, 300)
 
  return (
    <section>
      <h1>useThrottle</h1>
      <input
        placeholder="Type some text"
        style={{ background: "var(--charcoal)" }}
        type="text"
        value={val}
        onChange={(e) => {
          setVal(e.target.value)
        }}
      />
      <p>Val: {val}</p>
      <p>Throttled: {throttledValue}</p>
    </section>
  )
}

const throttledValue = useThrottle(inputValue, 300)