import * as React from "react"
 
import { useMemoryLeakGuard } from "@/hooks/use-memory-leak-guard"
 
export function Component() {
  const retainedPanelRef = React.useRef<Element | null>(null)
 
  useMemoryLeakGuard({
    refs: [retainedPanelRef],
    timerThresholdMs: 30_000,
    domCheckIntervalMs: 5000,
  })
 
  React.useEffect(() => {
    const id = window.setInterval(() => {
      // expensive polling…
    }, 2000)
 
    return () => window.clearInterval(id)
  }, [])
 
  return (
    <section>
      <button
        onClick={() => {
          // Force a “leak”: keep a reference to a node that will be removed.
          const target = document.getElementById("panel")
          if (target) retainedPanelRef.current = target
        }}
      >
        Capture panel ref
      </button>
    </section>
  )
}