'use client'

import { cn } from '@/lib/utils'

interface AlertBadgeProps {
  count: number
  variant?: 'default' | 'dot'
}

export function AlertBadge({ count, variant = 'default' }: AlertBadgeProps) {
  if (count === 0) {
    return null
  }

  if (variant === 'dot') {
    return (
      <span className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-red-500 animate-pulse" />
    )
  }

  return (
    <span
      className={cn(
        'inline-flex items-center justify-center min-w-[20px] h-5 px-1.5',
        'rounded-full bg-red-500 text-white text-xs font-medium',
        'animate-pulse'
      )}
    >
      {count > 99 ? '99+' : count}
    </span>
  )
}