import { Box, Stack, Text, } from '@chakra-ui/react'
import React from 'react'
import { MdGroups } from 'react-icons/md'

function BlueCard() {
    return (
        <Box
            backgroundColor={item.backgroundColor}
            borderRadius="xl"
        >
            <Box bg="#fff" borderRadius="xl" p={4} h="115px">
                <Stack direction={["column", "row"]} color={item.backgroundColor}>
                    <Text as="span">
                        <MdGroups />
                    </Text>
                    <Text fontSize="xs" mb={0} fontWeight={500}>
                        {item.title}
                    </Text>
                </Stack>
                <Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
                    {item.count}
                </Text>
            </Box>
            <Stack
                direction={["column", "row"]}
                color="#fff"
                justifyContent="center"
                alignItems="center"
            >
                <Text as="span">
                    <MdGroups />
                </Text>
                <Text fontSize="sm" m={0} py={2}>
                    <Link mb={0}>{item.linkText}</Link>
                </Text>
            </Stack>
        </Box>
    )
}

export default BlueCard