import { twMerge } from "@utils/tailwindMerge";
import { motion } from "framer-motion";
import type { ReactNode } from "react";

import { useTheme } from "@hooks/useTheme";
import { getBorderRadius } from "@utils/getBorderRadius";

export const InputOutputWrap = ({
	children,
	classNames,
}: { children: ReactNode; classNames?: string }) => {
	const style = twMerge(
		"bn-bg-layer-2 bn-relative bn-overflow-hidden bn-p-4 bn-flex bn-flex-col bn-gap-4 bn-z-0 group",
		classNames,
	);
	const theme = useTheme();
	return (
		<motion.div
			layout
			className={style}
			style={{ borderRadius: getBorderRadius(theme.borderRadius, 8) }}
		>
			{children}
		</motion.div>
	);
};
