"use client"
 
import * as React from "react"
 
import { usePageLeave } from "@/hooks/use-page-leave"
 
export function Component() {
  const elementRef = React.useRef<HTMLDivElement>(null)
  const [distractions, setDistractions] = React.useState(0)
 
  usePageLeave(() => {
    setDistractions((d) => d + 1)
  }, elementRef)
 
  return (
    <div ref={elementRef}>
      <p>(Mouse out of the page)</p>
      <h3>
        You&apos;ve been distracted {distractions}{" "}
        {distractions === 1 ? "time" : "times"}.
      </h3>
    </div>
  )
}