"use client"
 
import React from "react"
 
import { useMousePosition } from "@/hooks/useMousePosition"
 
export default function App() {
  const { position, ref, isSupported } = useMousePosition<HTMLDivElement>()
 
  if (!isSupported) {
    return <p>Mouse position tracking is not supported in this device.</p>
  }
 
  return (
    <div>
      <div
        ref={ref}
        style={{
          width: "300px",
          height: "300px",
          background: "lightgray",
          position: "relative",
        }}
      >
        <p>
          Mouse position inside element: {position.elementX},{" "}
          {position.elementY}
        </p>
      </div>
      <p>
        Mouse position in viewport: {position.x}, {position.y}
      </p>
    </div>
  )
}