import React from "react"
import { Divider, Text, Icon, } from "@chakra-ui/react"

import { HBetween, HFStack } from "./base"
import { VPanel } from "./Panels"


export const PoolData = ({ icon, title, data }) => {
    const TL = ({ title }) => (
        <Text
            color="gray.500"
            fontSize="16"
        >
            {title}
        </Text>
    )

    const TR = ({ value, ...rest }) => (
        <Text
            fontSize="16"
            fontWeight="700"
            {...rest}
        >
            {value}
        </Text>
    )

    return (
        <VPanel>
            <HFStack>
                {icon && <Icon as={icon} />}
                <Text
                    fontSize="18"
                    fontWeight="700"
                >
                    {title}
                </Text>
            </HFStack>

            <Divider />

            {
                data && data.map((d, index) => (
                    <HBetween key={index} py="2">
                        <TL title={d.name} />
                        <TR color={d.emp ? "blue.400" : ''} value={d.value + ' ' + d.unit} />
                    </HBetween>
                ))
            }
        </VPanel>
    )
}