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

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

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

	return (
		<LayoutGroup id="swap">
			<motion.div
				data-home-component
				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>
	);
};
