import BeasyLogoIcon from "@components/BeasyLogoIcon";
import WrapperTopEdgeCurved from "@components/WrapperTopEdgeCurved";
import Box from "@components/bases/Box";
import type { ReactElement } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import BackgroundDefault from "./BackgroundDefault";

const BackgroundWithBeasyIconAndWhiteContentArea = ({ children }: { children?: ReactElement }) => {
	return (
		<BackgroundDefault>
			<SafeAreaView edges={["top", "left", "right"]}>
				<Box
					style={{
						height: "100%",
						width: "100%",
					}}
				>
					<Box
						px={"l"}
						flexDirection={"row"}
						justifyContent={"space-between"}
						alignItems={"center"}
						mb={"m"}
					>
						<BeasyLogoIcon />
					</Box>
					<WrapperTopEdgeCurved>{children}</WrapperTopEdgeCurved>
				</Box>
			</SafeAreaView>
		</BackgroundDefault>
	);
};

export default BackgroundWithBeasyIconAndWhiteContentArea;