import {
    Tag, Text,
} from "@chakra-ui/react"
import { ModalBox, HFStack, VFStack, HBetween } from "../components"

// Modal box for extraction
export const ModalRetrieve = ({ isOpen, onClose, onConfirm, vLeft = 0, vRight = 0 }) => {

    const TopT = ({ v }) => ((
        <Text
            fontSize="20"
            fontWeight="700"
        >
            {v}
        </Text>
    ))

    const BelowT = ({ v }) => ((
        <Text
            fontSize={12}
            color="gray.400"
        >
            {v}
        </Text>
    ))

    return (
        <ModalBox
            title="Income"
            isOpen={isOpen}
            onClose={onClose}
            showCancel={false}
            textConfirm="Extract"
            onConfirm={onConfirm}
        >
            <VFStack
                bg="gray.100"
                p="4"
                pb="20"
                borderRadius="10"
            >
                <HFStack>
                    <Tag colorScheme="orange" variant="solid" size="lg">Current</Tag>
                </HFStack>
                <HBetween>
                    <VFStack>
                        <TopT v={vLeft} />
                        <BelowT v="USDT" />
                    </VFStack>
                    <VFStack>
                        <TopT v={vRight} />
                        <BelowT v="USDC" />
                    </VFStack>
                </HBetween>
            </VFStack>
        </ModalBox>
    )
}