"use client"
 
import { useFullscreen } from "@/hooks/use-fullscreen"
 
export function Component() {
  const {
    ref,
    isFullscreen,
    requestFullscreen,
    exitFullscreen,
    toggleFullscreen,
  } = useFullscreen()
 
  return (
    <div>
      <button onClick={toggleFullscreen}>
        {isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
      </button>
      <div
        ref={ref}
        style={{ width: "100%", height: "100vh", backgroundColor: "lightgray" }}
      >
        <h1>Toggle Fullscreen</h1>
      </div>
    </div>
  )
}