"use client";

import type { ReactNode } from "react";
import { useState } from "react";
import { motion, useReducedMotion } from "framer-motion";

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 = 36,
  duration = 0.8,
  delay = 0,
  className = "",
}: RevealProps) {
  const shouldReduceMotion = useReducedMotion();
  const [animating, setAnimating] = useState(!shouldReduceMotion);

  return (
    <motion.div
      className={className}
      initial={
        shouldReduceMotion
          ? { opacity: 0 }
          : { opacity: 0, y, clipPath: "inset(100% 0 0 0)" }
      }
      whileInView={
        shouldReduceMotion
          ? { opacity: 1 }
          : { opacity: 1, y: 0, clipPath: "inset(0% 0 0 0)" }
      }
      viewport={{ once: true, amount: 0.2 }}
      transition={
        shouldReduceMotion
          ? { duration: 0.25 }
          : {
              duration,
              delay,
              ease: [0.16, 1, 0.3, 1],
            }
      }
      style={{
        willChange:
          animating && !shouldReduceMotion
            ? "transform, opacity, clip-path"
            : undefined,
      }}
      onAnimationStart={() => {
        if (!shouldReduceMotion) {
          setAnimating(true);
        }
      }}
      onAnimationComplete={() => setAnimating(false)}
    >
      {children}
    </motion.div>
  );
}