import * as React from "react"
 
import { useNetworkQuality } from "@/hooks/use-network-quality"
 
export function Component() {
  const { rtt, downKbps, upKbps, category } = useNetworkQuality({
    sampleInterval: 5000,
  })
 
  return (
    <div>
      <p>Network Quality: {category}</p>
      <p>RTT: {rtt ? `${Math.round(rtt)}ms` : "N/A"}</p>
      <p>
        Download: {downKbps ? `${(downKbps / 1000).toFixed(2)} Mbps` : "N/A"}
      </p>
    </div>
  )
}

const { category, downKbps } = useNetworkQuality()
 
const videoQuality = React.useMemo(() => {
  switch (category) {
    case "excellent":
      return "1080p"
    case "good":
      return "720p"
    case "fair":
      return "480p"
    default:
      return "360p"
  }
}, [category])

const { category } = useNetworkQuality()
 
const shouldSync = React.useMemo(() => {
  return category === "excellent" || category === "good"
}, [category])
 
React.useEffect(() => {
  if (shouldSync) {
    syncData()
  }
}, [shouldSync])

const { rtt, category } = useNetworkQuality({
  sampleInterval: 10000, // Measure every 10 seconds
  enabled: true,
})

const { category } = useNetworkQuality({
  enabled: false, // Disable automatic monitoring
})