import { Button, Box, Flex, Text } from '@chakra-ui/react';
import React from 'react';

const Ding = ({ isSelected, activeComp, label, Icon, ...props }) => (
  <Button
    variant="unstyled"
    p="2"
    h="auto"
    pos="relative"
    opacity={isSelected ? 1 : 0.4}
    _hover={{ opacity: 1 }}
    _focus={{ outline: 'none' }}
    {...props}
  >
    <Flex direction="column" align="center">
      <Icon fontSize="2xl" color="gray.600" _dark={{ color: 'gray.300' }} />
      <Text fontSize="sm" fontWeight="normal" variant="subtle" mt="2">
        {label}
      </Text>
      <Box
        pos="absolute"
        bottom="-10px"
        w="full"
        display="flex"
        justifyContent="center"
        px="3"
      >
        {isSelected && activeComp}
      </Box>
    </Flex>
  </Button>
);

export default Ding;