"use client"
 
import { useScrollDirection } from "@/hooks/use-scroll-direction"
 
export function Component() {
  const direction = useScrollDirection({
    initialDirection: "up", // or "down"
    threshold: 50, // Minimum scroll distance to trigger a change
    target: window, // Element to observe, defaults to window
  })
 
  return (
    <div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto" }}>
      <p>Current scroll direction: {direction}</p>
      <div
        style={{
          height: "2000px",
          background: "linear-gradient(to bottom, #f0f0f0, #d0d0d0)",
        }}
      >
        Scroll down or up to see the direction change.
      </div>
    </div>
  )
}