EpicNext-Cms/src/components/motion-elements.tsx

"use client";

import type { HTMLMotionProps } from "framer-motion";
import { motion } from "framer-motion";
import {
	fadeIn,
	fadeInUp,
	hoverLift,
	hoverScale,
	scaleIn,
	staggerContainer,
	staggerItem,
} from "@/lib/motion";

type DivProps = HTMLMotionProps<"div">;

export function AnimatedSection({ children, className, ...props }: DivProps) {
	return (
		<motion.div
			className={className}
			variants={staggerContainer}
			initial="hidden"
			animate="visible"
			{...props}
		>
			{children}
		</motion.div>
	);
}

export function AnimatedChild({ children, className, ...props }: DivProps) {
	return (
		<motion.div className={className} variants={staggerItem} {...props}>
			{children}
		</motion.div>
	);
}

export function FadeIn({ children, className, ...props }: DivProps) {
	return (
		<motion.div
			className={className}
			variants={fadeIn}
			initial="hidden"
			animate="visible"
			{...props}
		>
			{children}
		</motion.div>
	);
}

export function FadeInUp({ children, className, ...props }: DivProps) {
	return (
		<motion.div
			className={className}
			variants={fadeInUp}
			initial="hidden"
			animate="visible"
			{...props}
		>
			{children}
		</motion.div>
	);
}

export function ScaleIn({ children, className, ...props }: DivProps) {
	return (
		<motion.div
			className={className}
			variants={scaleIn}
			initial="hidden"
			animate="visible"
			{...props}
		>
			{children}
		</motion.div>
	);
}

export function HoverCard({ children, className, ...props }: DivProps) {
	return (
		<motion.div
			className={className}
			{...hoverLift}
			whileHover={{ y: -4, transition: { duration: 0.2 } }}
			{...props}
		>
			{children}
		</motion.div>
	);
}

export function HoverButton({ children, className, ...props }: DivProps) {
	return (
		<motion.div className={className} {...hoverScale} {...props}>
			{children}
		</motion.div>
	);
}