import { motion } from "framer-motion";
import React, { type ReactNode } from "react";
import { useTheme } from "../../hooks/useTheme";
import { getBorderRadius } from "../../utils/getBorderRadius";

export const InputOutputWrap = ({ children }: { children: ReactNode }) => {
	const theme = useTheme();
	return (
		<motion.div
			layout
			className="bn-bg-layer-2 bn-mt-4 bn-relative bn-overflow-hidden"
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
		>
			{children}
		</motion.div>
	);
};
