import BeasyLogoIcon from "@components/BeasyLogoIcon";
import GoBackIconButton from "@components/GoBackIconButton";
import WrapperTopEdgeCurved from "@components/WrapperTopEdgeCurved";
import Box from "@components/bases/Box";
import { useNavigation } from "@react-navigation/native";
import type { ReactElement } from "react";
import BackgroundDefault from "./BeasyDefaultBackground";

const BackgroundWithBeasyIconAndWhiteContentArea = ({
	children,
	goBack = false,
}: { children?: ReactElement; goBack?: boolean }) => {
	const navigation = useNavigation();
	return (
		<BackgroundDefault>
			<Box
				px={"l"}
				flexDirection={"row"}
				justifyContent={"space-between"}
				alignItems={"center"}
				mb={"m"}
			>
				<BeasyLogoIcon />
				{goBack && <GoBackIconButton onPress={() => navigation.goBack()} />}
			</Box>
			<WrapperTopEdgeCurved>{children}</WrapperTopEdgeCurved>
		</BackgroundDefault>
	);
};

export default BackgroundWithBeasyIconAndWhiteContentArea;