import React, { ReactElement } from 'react';
import css from '../../utils/css';

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

import Status from './Status';
import Count from './Count';

import { CommonProps } from '../common';

interface StandaloneBadgeProps extends CommonProps {
  /**
   * Content to be displayed, can be number or string.
   */
  content: number | string;
  /**
   * Visual intent color to apply to badge.
   */
  intent?: 'basic' | 'success' | 'primary' | 'warning' | 'danger' | 'error';
}

const Badge = ({
  content,
  intent = 'primary',
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: StandaloneBadgeProps): ReactElement => {
  return (
    <StyledBadge
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
      themeIntent={intent}
      themePadding={getPaddingState(content)}
    >
      {isNumber(content) && content > MAX_NUMBER ? `${MAX_NUMBER}+` : content}
    </StyledBadge>
  );
};

Badge.Status = Status;
Badge.Count = Count;

export default Badge;