import { Badge as OldBadge, BadgeProps, ConfigProvider } from 'antd';
import React, { useContext, useMemo } from 'react';
import './index.less';
import classNames from 'classnames';
import Ribbon from 'antd/lib/badge/Ribbon';

interface BadgeExtraProps {}

interface CompoundedComponent extends React.FC<BadgeProps & BadgeExtraProps> {
  Ribbon?: typeof Ribbon;
}

const Badge: CompoundedComponent = props => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-badge');

  return (
    <OldBadge
      {...props}
      className={classNames(
        `${prefixCls}-box`,
        props.className,
        props.children && `${prefixCls}-${props.status}`,
      )}
    >
      {props.children}
      {props.text && <div className={`${prefixCls}-text`}>{props.text}</div>}
    </OldBadge>
  );
};

export { Badge };