"use client"
 
import { useInfiniteScroll } from "@/hooks/use-infinite-scroll"
 
export function Component() {
  const { ref, onLoadMore, isLoading, hasMore } = useInfiniteScroll({
    onLoadMore: () => {
      console.log("Loading more content...")
      // Simulate loading more content
      setTimeout(() => {
        console.log("More content loaded")
      }, 1000)
    },
    isLoading: false,
    hasMore: true,
    threshold: 100,
  })
 
  return (
    <div
      ref={ref}
      style={{
        height: "400px",
        overflowY: "auto",
        padding: "20px",
        border: "1px solid #ccc",
      }}
    >
      <p>Scroll down to load more content...</p>
      <div style={{ height: "800px" }}>
        {/* Simulated content */}
        {Array.from({ length: 20 }, (_, i) => (
          <p key={i}>Item {i + 1}</p>
        ))}
      </div>
      {isLoading && <p>Loading...</p>}
      {!hasMore && <p>No more content to load.</p>}
    </div>
  )
}