'use client';

import { FC, ReactNode } from 'react';
import { cn } from '@/utils/helpers';
import styles from './Badge.module.scss';

export interface BadgeProps {
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
  size?: 'sm' | 'md';
  dot?: boolean;
  count?: number;
  maxCount?: number;
  children?: ReactNode;
  className?: string;
}

export const Badge: FC<BadgeProps> = ({
  variant = 'default',
  size = 'md',
  dot = false,
  count,
  maxCount = 99,
  children,
  className,
}) => {
  const displayCount = count && count > maxCount ? `${maxCount}+` : count;

  // 如果只是显示徽章标签（没有children）
  if (!children) {
    return (
      <span
        className={cn(
          styles.badgeTag,
          styles[`badgeTag--${variant}`],
          styles[`badgeTag--${size}`],
          className
        )}
      >
        {displayCount}
      </span>
    );
  }

  // 如果是包裹children的角标
  return (
    <span className={cn(styles.badge, className)}>
      {children}
      {dot ? (
        <span className={cn(styles.badge__dot, styles[`badge__dot--${variant}`])} />
      ) : count !== undefined && count > 0 ? (
        <span
          className={cn(
            styles.badge__count,
            styles[`badge__count--${variant}`],
            styles[`badge__count--${size}`]
          )}
        >
          {displayCount}
        </span>
      ) : null}
    </span>
  );
};
