'use client'

interface NotificationBadgeProps {
  count: number
  isCollapsed: boolean
}

export function NotificationBadge({ count, isCollapsed }: NotificationBadgeProps) {
  if (count === 0) return null
  
  return (
    <div
      className={`absolute ${
        isCollapsed ? 'top-1 right-1 w-3 h-3' : 'top-2 right-2 w-4 h-4'
      } bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-bold`}
    >
      {isCollapsed ? '' : count > 99 ? '99+' : count}
    </div>
  )
}