"use client"
 
import { usePinchZoom } from "@/hooks/use-pinch-zoom"
 
export function Component() {
  const { scale, isSupported, ...handlers } = usePinchZoom({
    onZoom: (s) => console.log("Zoom scale:", s),
    minScale: 0.2,
    maxScale: 4,
  })
 
  if (!isSupported) {
    return <div>Pinch zoom is not supported on this device.</div>
  }
 
  return (
    <div
      {...handlers}
      style={{
        transform: `scale(${scale})`,
        touchAction: "none",
        width: "100%",
        height: "100%",
        backgroundColor: "lightgray",
      }}
    >
      Pinch to zoom
    </div>
  )
}