"use client";
// Adapted from Magic UI (MIT). See THIRD_PARTY_NOTICES.md.
import {
  type ComponentProps,
  useEffect,
  useImperativeHandle,
  useRef,
} from "react";
export interface BlurFadeProps extends ComponentProps<"div"> {
  inView?: boolean;
}
export function BlurFade({
  inView = true,
  className = "",
  ref: forwardedRef,
  ...props
}: BlurFadeProps) {
  const ref = useRef<HTMLDivElement>(null);
  useImperativeHandle(forwardedRef, () => ref.current!, []);
  useEffect(() => {
    const element = ref.current;
    if (!element || matchMedia("(prefers-reduced-motion: reduce)").matches)
      return;
    const reveal = () => {
      element.dataset.reveal = "true";
    };
    if (!inView || !("IntersectionObserver" in window)) {
      reveal();
      return;
    }
    const observer = new IntersectionObserver((entries) => {
      if (entries.some((entry) => entry.isIntersecting)) {
        reveal();
        observer.disconnect();
      }
    });
    observer.observe(element);
    return () => observer.disconnect();
  }, [inView]);
  return <div {...props} ref={ref} className={`ynr-blur-fade ${className}`} />;
}