import { useRef } from "react";
import { useInView as useFramerInView } from "framer-motion";

interface UseInViewOptions {
  threshold?: number | number[];
  root?: Element | null;
}

const DEFAULT_OPTIONS: UseInViewOptions = {};

/**
 * Scroll-triggered visibility hook (trigger once).
 * Wraps framer-motion's useInView.
 */
export function useInView<T extends HTMLElement = HTMLElement>(
  options: UseInViewOptions = DEFAULT_OPTIONS
) {
  const ref = useRef<T>(null!);

  const isInView = useFramerInView(ref, {
    once: true,
    amount: typeof options.threshold === "number" ? options.threshold : 0.1,
    ...(options.root ? { root: { current: options.root } } : undefined),
  });

  return [ref, isInView] as const;
}
