import React, { ReactNode, ReactElement } from 'react';

import Icon, { IconName } from '../Icon';
import { BadgeWrapper, CountIconBadge, CountNumberBadge } from './StyledBadge';

import { MAX_NUMBER, getPaddingState, isNumber } from './utils';

export interface CountProps {
  /*
   * The count badge's content.
   */
  children: ReactNode;
  /**
   * If it is number, just input the number value. If icon, just input name of icon (corresponding to Icon component in hero-design).
   */
  content: number | IconName;
  /**
   * Visual intent color to apply to count badge.
   */
  intent?: 'success' | 'primary' | 'warning' | 'danger' | 'error';
}

const Count = ({
  children,
  content,
  intent = 'danger',
}: CountProps): ReactElement => {
  return (
    <BadgeWrapper>
      {children}
      {isNumber(content) ? (
        <CountNumberBadge
          themeIntent={intent}
          themePadding={getPaddingState(content)}
        >
          {content > MAX_NUMBER ? `${MAX_NUMBER}+` : content}
        </CountNumberBadge>
      ) : (
        <CountIconBadge>
          <Icon
            icon={content}
            intent={intent}
            data-test-id="count-icon-badge"
          />
        </CountIconBadge>
      )}
    </BadgeWrapper>
  );
};

export default Count;