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

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

export default BackgroundWithBeasyIconAndWhiteContentArea;
