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

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

const BalanceContainer = ({ label, balance }: Props) => {
	const [showBalance, setShowBalance] = useState(false);

	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"}>
				<TouchableOpacity onPress={() => setShowBalance(!showBalance)}>
					<Box height={50} alignItems={"center"} justifyContent={"center"}>
						{showBalance ? (
							<Text fontSize={30} variant={"black"}>
								{balance}
							</Text>
						) : (
							<Box width={40} height={40}>
								<Image
									source={require("../../assets/eye_hidden.png")}
									style={images.contain}
								/>
							</Box>
						)}
					</Box>
				</TouchableOpacity>

				<Text color={"gray"}>{label}</Text>
			</Box>
		</Box>
	);
};

export default BalanceContainer;