WearPartTracker/app/components/AlertBadge.tsx

interface AlertBadgeProps {
  count: number
  variant?: 'warning' | 'critical'
}

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

  const bgColor = variant === 'critical' ? 'bg-red-100' : 'bg-orange-100'
  const textColor = variant === 'critical' ? 'text-red-800' : 'text-orange-800'

  return (
    <span
      className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${bgColor} ${textColor}`}
    >
      ⚠️ {count}
    </span>
  )
}