import React, { ReactNode } from 'react';
import { Box, CounterBadge } from '@wix/design-system';

export interface CounterBadgeButtonProps {
  children?: ReactNode;
  dataHook?: string;
  count?: number;
}

export const CounterBadgeButton = (props: CounterBadgeButtonProps) => {
  const { children, count = 0, dataHook = 'counter-badge-count' } = props;

  return (
    <Box position="relative">
      {children}
      {count > 0 && (
        <Box
          position="absolute"
          top={3}
          right={3}
          transform="translate3d(50%, -50%, 0)"
          pointerEvents="none"
        >
          <CounterBadge dataHook={dataHook} skin="neutralStandard">
            {count}
          </CounterBadge>
        </Box>
      )}
    </Box>
  );
};