"use client";

import { ReactNode } from "react";
import { useScrollReveal } from "../hooks/useScrollReveal";

interface RevealProps {
  children: ReactNode;
  y?: number;
  duration?: number;
  delay?: number;
  ease?: string;
  start?: string;
  end?: string;
  scrub?: boolean | number;
  className?: string;
}

export function Reveal({
  children,
  y,
  duration,
  delay,
  ease,
  start,
  end,
  scrub,
  className = "",
}: RevealProps) {
  const ref = useScrollReveal({ y, duration, delay, ease, start, end, scrub });

  return (
    <div ref={ref as React.RefObject<HTMLDivElement>} className={className}>
      {children}
    </div>
  );
}