import { Badge, BadgeProps, Box, Icon, Stack } from '@chakra-ui/react';
import { ReactNode } from 'react';

export function IconBadge({
  children,
  iconClass,
  backgroundColor,
  size = 'lg'
}: {
  children?: ReactNode;
  iconClass: string;
  backgroundColor?: BadgeProps['backgroundColor'];
  size?: 'sm' | 'md' | 'lg' | 'xs';
}) {
  return (
    <Box flex={1} direction="row" justifyContent="center" alignItems="center">
      <Badge variant="solid" size={size} backgroundColor={backgroundColor}>
        <Stack direction="row">
          <Icon fontSize="xl">
            <i className={iconClass} />
          </Icon>
          {children}
        </Stack>
      </Badge>
    </Box>
  );
}