"use client"
 
import * as React from "react"
 
import { useIntervalWhen } from "@/hooks/use-interval-when"
 
export function Component() {
  const [count, setCount] = useState(0)
  const [isActive, setIsActive] = useState(false)
 
  const clearInterval = useIntervalWhen(
    () => {
      setCount((c) => c + 1)
    },
    {
      ms: 1000,
      when: isActive,
      startImmediately: true,
    }
  )
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setIsActive((a) => !a)}>
        {isActive ? "Pause" : "Start"}
      </button>
      <button onClick={clearInterval}>Clear</button>
    </div>
  )
}