"use client";

import { createElement } from "react";
import { cn } from "@/lib/utils";
import { useReveal } from "@/lib/use-reveal";

type RevealProps = {
  children: React.ReactNode;
  className?: string;
  /** Element/tag to render (default div). */
  as?: keyof React.JSX.IntrinsicElements;
  /** Stagger by passing an incrementing delay (ms) to siblings. */
  delayMs?: number;
  /** Fade-up travel distance in px (default 28). */
  y?: number;
};

/**
 * Scroll-reveal wrapper: a soft fade + rise as the element enters the
 * viewport. Visible by default (degrades gracefully without JS) and honors
 * prefers-reduced-motion. See useReveal + globals.css for the mechanism.
 */
export function Reveal({ children, className, as = "div", delayMs, y }: RevealProps) {
  const ref = useReveal<HTMLElement>({ delayMs, y });
  return createElement(as, { ref, className: cn(className) }, children);
}