import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { images } from "@styles/Commons";
import { Image } from "react-native";

type Props = { balance: number; label: string };

const BalanceContainer = ({ label, balance }: Props) => {
	return (
		<Box
			position={"relative"}
			width={300}
			height={130}
			alignItems={"center"}
			justifyContent={"center"}
		>
			<Box
				width={300}
				height={130}
				borderRadius={10}
				overflow={"hidden"}
				position={"absolute"}
			>
				<Image
					source={require("../../assets/balance_container.png")}
					style={images.cover}
				/>
			</Box>

			<Box alignItems={"center"} gap={"s"}>
				<Text fontSize={30}>{balance}</Text>
				<Text color={"gray"}>{label}</Text>
			</Box>
		</Box>
	);
};

export default BalanceContainer;
