"use client"
 
import { useIdle } from "@/hooks/use-idle"
 
export function Component() {
  const isIdle = useIdle(3000) // 3 seconds idle time
 
  return (
    <div>
      <h2>User Status: {isIdle ? "⏸️ Idle" : "▶️ Active"}</h2>
      <p>Move your mouse or press any key to reset the idle timer</p>
      <div>
        <div
          style={{
            height: "6px",
            width: "100%",
            borderRadius: "9999px",
            transition: "background-color 0.3s",
            backgroundColor: isIdle ? "yellow" : "green",
          }}
        />
      </div>
    </div>
  )
}