"use client"
 
import { useMemory } from "@/hooks/use-memory"
 
export function Component() {
  const { isSupported, memory } = useMemory({ interval: 2000, immediate: true })
 
  if (!isSupported) {
    return <div>Memory API not supported in this browser.</div>
  }
 
  return (
    <div>
      <h1>Memory Usage</h1>
      {memory ? (
        <ul>
          <li>
            JS Heap Size Limit:{" "}
            {(memory.jsHeapSizeLimit / 1024 / 1024).toFixed(2)} MB
          </li>
          <li>
            Total JS Heap Size:{" "}
            {(memory.totalJSHeapSize / 1024 / 1024).toFixed(2)} MB
          </li>
          <li>
            Used JS Heap Size:{" "}
            {(memory.usedJSHeapSize / 1024 / 1024).toFixed(2)} MB
          </li>
        </ul>
      ) : (
        <p>Loading memory info...</p>
      )}
    </div>
  )
}