"use client";

import React from 'react';
import { motion, AnimatePresence, Variants } from 'framer-motion';

export { motion, AnimatePresence };
export type { Variants };

interface FramerMotionWrapperProps {
  children: React.ReactNode;
  variants?: Variants;
  initial?: string | boolean;
  animate?: string | boolean;
  exit?: string | boolean;
  transition?: object;
  className?: string;
  [key: string]: any; // Allows for other motion props
}

/**
 * A generic Framer Motion wrapper for animating elements.
 * Provides a simple way to use `motion.div` with common animation properties.
 */
export function FramerMotionWrapper({
  children,
  variants,
  initial = "hidden",  animate = "visible",  exit = "exit",  transition,
  className,
  ...rest
}: FramerMotionWrapperProps) {
  return (
    <motion.div
      variants={variants}
      initial={initial}
      animate={animate}
      exit={exit}
      transition={transition}
      className={className}
      {...rest}
    >
      {children}
    </motion.div>
  );
}

// Example variants for common animations
export const fadeInVariants: Variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { duration: 0.8 } },
  exit: { opacity: 0, transition: { duration: 0.5 } },
};

export const slideUpVariants: Variants = {
  hidden: { opacity: 0, y: 50 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: "easeOut" } },
  exit: { opacity: 0, y: -50, transition: { duration: 0.4, ease: "easeIn" } },
};
