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

function BlueCard({blueCardData}) {
    return (
        <Box
            backgroundColor={blueCardData.backgroundColor}
            borderRadius="xl"
        >
            <Box bg="#fff" borderRadius="xl" p={4} h="115px">
                <Stack direction={["column", "row"]} color={blueCardData.backgroundColor}>
                    <Text as="span">
                        <MdGroups />
                    </Text>
                    <Text textTransform={'capitalize'} display={'flex'} alignItems={'center'} as={'span'} fontSize="xs" mb={0} fontWeight={500}>
                        {blueCardData.title.toUpperCase()}
                    </Text>
                </Stack>
                <Text  fontSize="xl" fontWeight={500} mt={2} mb={0}>
                    {blueCardData.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}>{blueCardData.buttonText}</Link>
                </Text>
            </Stack>
        </Box>
    );
}

export default BlueCard;
