import BeasyLogoIcon from "@components/BeasyLogoIcon";
import WrapperTopEdgeCurved from "@components/WrapperTopEdgeCurved";
import Box from "@components/bases/Box";
import SafeAreaViewTopLeftRightFull from "@components/containers/SafeAreaViewTopLeftRightFull";
import type { ReactElement } from "react";
import BackgroundDefault from "./BackgroundDefault";

const BackgroundWithBeasyIconAndWhiteContentArea = ({ children }: { children?: ReactElement }) => {
	return (
		<BackgroundDefault>
			<SafeAreaViewTopLeftRightFull>
				<Box
					px={"l"}
					flexDirection={"row"}
					justifyContent={"space-between"}
					alignItems={"center"}
					mb={"m"}
				>
					<BeasyLogoIcon />
				</Box>
				<WrapperTopEdgeCurved>{children}</WrapperTopEdgeCurved>
			</SafeAreaViewTopLeftRightFull>
		</BackgroundDefault>
	);
};

export default BackgroundWithBeasyIconAndWhiteContentArea;