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

export const SwapWrap = ({ children }: { children: ReactNode }) => {
	const { borderRadius, width } = useTheme();

	const containerStyle = {
		borderRadius: getBorderRadius(borderRadius),
	};

	return (
		<LayoutGroup id="swap">
			<motion.div
				layout
				className="bn-bg-layer-1 bn-p-4 bn-min-w-[360px] bn-relative bn-overflow-hidden bn-w-full sm:bn-border bn-border-solid bn-border-subtle"
				style={containerStyle}
			>
				{children}
			</motion.div>
		</LayoutGroup>
	);
};
