"use client";

import { motion, HTMLMotionProps } from "framer-motion";
import { cn } from "@/lib/utils";
import { forwardRef } from "react";

interface MotionWrapperProps extends HTMLMotionProps<"div"> {
    children: React.ReactNode;
    className?: string;
}

export const MotionWrapper = forwardRef<HTMLDivElement, MotionWrapperProps>(
    ({ children, className, ...props }, ref) => {
        return (
            <motion.div
                ref={ref}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.4, ease: "easeOut" }}
                className={cn(className)}
                {...props}
            >
                {children}
            </motion.div>
        );
    }
);

MotionWrapper.displayName = "MotionWrapper";