"use client";

import React, { useEffect, useRef } from "react";
import { motion, useInView, useAnimation, Variants } from "framer-motion";

interface RevealProps {
  children: React.ReactNode;
  width?: "fit-content" | "100%";
  delay?: number;
  className?: string;
  direction?: "up" | "down" | "left" | "right" | "none";
  scale?: number;
  blur?: boolean;
}

export const Reveal: React.FC<RevealProps> = ({
  children,
  width = "100%",
  delay = 0.25,
  className = "",
  direction = "up",
  scale = 0.98,
  blur = true,
}) => {
  const variants: Variants = {
    hidden: {
      opacity: 0,
      y: direction === "up" ? 20 : direction === "down" ? -20 : 0,
      x: direction === "left" ? 20 : direction === "right" ? -20 : 0,
      scale: scale !== 1 ? scale : 1,
      filter: blur ? "blur(8px)" : "none",
    },
    visible: {
      opacity: 1,
      y: 0,
      x: 0,
      scale: 1,
      filter: "blur(0px)",
    },
  };

  return (
    <div
      style={{
        position: "relative",
        width,
      }}
      className={className}
    >
      <motion.div
        variants={variants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: "-10%" }}
        style={{
          width: width === "100%" ? "100%" : "inherit",
          backfaceVisibility: "hidden",
        }}
        transition={{
          duration: 0.5,
          delay: delay,
          type: "spring",
          stiffness: 100,
          damping: 20,
          mass: 1,
          opacity: { duration: 0.4, ease: [0.16, 1, 0.3, 1] },
          filter: { duration: 0.4 },
        }}
      >
        {children}
      </motion.div>
    </div>
  );
};