"use client"
 
import * as React from "react"
 
import { useIntersectionObserver } from "@/hooks/use-intersection-observer"
 
export function Component() {
  const targetRef = React.useRef<HTMLDivElement>(null)
 
  const entry = useIntersectionObserver(targetRef, {
    threshold: 0.5, // Trigger when 50% of the element is visible
    rootMargin: "0px", // No margin around the root
  })
 
  const isVisible = entry?.isIntersecting ?? false
 
  return (
    <div
      ref={targetRef}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: isVisible ? "green" : "red",
      }}
    >
      {isVisible ? "Visible" : "Not Visible"}
    </div>
  )
}