export interface BadgeState {
  count: number;
  hasCritical: boolean;
  hasHigh: boolean;
  hasRecentMention: boolean;
}

// TODO: pickStyle 과 formatBadgeCount 같은 헬퍼로 분리하세요.
export function NotificationBadge({ state }: { state: BadgeState }) {
  const { count, hasCritical, hasHigh, hasRecentMention } = state;

  const level = hasCritical
    ? 'critical'
    : hasHigh
      ? 'high'
      : hasRecentMention
        ? 'mention'
        : 'default';

  const color = hasCritical
    ? '#dc2626'
    : hasHigh
      ? '#ea580c'
      : hasRecentMention
        ? '#2563eb'
        : '#6b7280';

  const animation = hasCritical
    ? 'pulse-critical'
    : hasHigh
      ? 'pulse-high'
      : hasRecentMention
        ? 'bounce'
        : 'none';

  const label = count > 99 ? '99+' : count > 9 ? (hasCritical ? '!' : String(count)) : String(count);

  return (
    <span
      data-testid="badge"
      data-level={level}
      data-color={color}
      data-animation={animation}
    >
      {label}
    </span>
  );
}