import { useEmotionCss } from '@ant-design/use-emotion-css';
import type { BadgeProps } from 'antd';
import { Badge } from 'antd';

const TabBadge: React.FC<
    BadgeProps & {
        /** 是否活动 */
        active?: boolean;
    }
> = ({ count, overflowCount, active, color }) => {
    const className = useEmotionCss(() => {
        return {
            '.ant-badge-count': {
                minWidth: 16,
                height: 16,
                lineHeight: '15px',
                marginBlockStart: -3,
                marginInlineStart: 4,
            },
        };
    });
    if (!count) { return null; }
    if (color) {
        return (
            <Badge
                className={className}
                showZero={false}
                count={count}
                color={color}
                overflowCount={overflowCount ?? 999999999}
            />
        );
    }
    return (
        <Badge
            className={className}
            showZero={false}
            count={count}
            overflowCount={overflowCount ?? 999999999}
            style={{
                color: active ? '#1890FF' : '#666',
                backgroundColor: active ? '#E6F7FF' : '#f0f0f0',
            }}
        />
    );
};

export default TabBadge;
