Badge

<Badge variant="critical">Critical</Badge>

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

interface BadgeProps {
  children: React.ReactNode
  variant?: 'critical' | 'high' | 'medium' | 'accent'
  className?: string
}

export function Badge({ children, variant = 'accent', className }: BadgeProps): React.JSX.Element {
  return (
    <span
      className={cn(
        'badge',
        variant === 'critical' && 'badge-critical',
        variant === 'high' && 'badge-high',
        variant === 'medium' && 'badge-medium',
        variant === 'accent' && 'badge-accent',
        className,
      )}
    >
      {children}
    </span>
  )
}