"use client"
 
import * as React from "react"
 
import { useVisibilityChange } from "@/hooks/use-visibility-change"
 
export function Component() {
  const documentVisible = useVisibilityChange()
  const [tabAwayCount, setTabAwayCount] = React.useState(0)
 
  React.useEffect(() => {
    if (!documentVisible) {
      setTabAwayCount((prev) => prev + 1)
    }
  }, [documentVisible])
 
  return (
    <div>
      <h1>Document Visibility Tracker</h1>
      <p>Document is currently: {documentVisible ? "Visible" : "Hidden"}</p>
      <p>Number of times tabbed away: {tabAwayCount}</p>
    </div>
  )
}