"use client";

import { type CSSProperties, type ReactNode, useRef } from "react";
import { useInView } from "@/app/hooks/useInView";

interface RevealProps {
  children: ReactNode;
  y?: number;
  duration?: number;
  delay?: number;
  className?: string;
}

/**
 * Conteúdo que sobe e aparece uma vez, quando chega à janela. A animação é CSS (.ds-reveal em globals.css):
 * só opacidade e deslocamento, que a placa de vídeo compõe sem redesenhar. Sem JavaScript ou com movimento
 * reduzido, o conteúdo já nasce visível.
 */
export function Reveal({
  children,
  y = 36,
  duration = 0.8,
  delay = 0,
  className = "",
}: RevealProps) {
  const ref = useRef<HTMLDivElement>(null);
  const shown = useInView(ref);

  return (
    <div
      ref={ref}
      className={`ds-reveal ${className}`.trim()}
      data-shown={shown ? "" : undefined}
      style={
        {
          "--reveal-y": `${y}px`,
          "--reveal-duration": `${duration}s`,
          "--reveal-delay": `${delay}s`,
        } as CSSProperties
      }
    >
      {children}
    </div>
  );
}