import { ease } from "@unom/style";
import { motion } from "motion/react";
import type { ReactNode } from "react";

const animation = {
	container: {
		variants: {
			enter: {
				opacity: 1,
				y: 0,
			},
			from: {
				opacity: 0,
				y: -20,
			},
		},
		transition: ease.quint(0.9).out,
	},
};

export const FieldContainer = ({ children }: { children: ReactNode }) => {
	return (
		<motion.div {...animation.container} className="py-3 flex flex-col gap-2">
			{children}
		</motion.div>
	);
};
