"use client";

import { m, type HTMLMotionProps } from "framer-motion";

interface RevealProps extends HTMLMotionProps<"div"> {
  delay?: number;
  y?: number;
  duration?: number;
  margin?: string;
}

const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1];

export function Reveal({
  delay = 0,
  y = 20,
  duration = 0.65,
  margin = "-60px",
  children,
  ...rest
}: RevealProps) {
  return (
    <m.div
      initial={{ opacity: 0, y }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin }}
      transition={{ duration, delay, ease: EASE }}
      {...rest}
    >
      {children}
    </m.div>
  );
}