// src/components/ui/Badge.tsx
// Input: variant, size, icon, children
// Output: compact status/type badge
// Rationale: used for project status, criticality, sensor kind, event type

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

export type BadgeVariant = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'accent'
export type BadgeSize = 'xs' | 'sm'

export interface BadgeProps {
  variant?: BadgeVariant
  size?: BadgeSize
  icon?: React.ReactNode
  children: React.ReactNode
  className?: string
}

const variantClasses: Record<BadgeVariant, string> = {
  success: 'bg-status-success/15 border-status-success/40 text-status-success',
  warning: 'bg-status-warning/15 border-status-warning/40 text-status-warning',
  danger:  'bg-status-danger/15  border-status-danger/40  text-status-danger',
  info:    'bg-status-info/15    border-status-info/40    text-status-info',
  neutral: 'bg-bg-overlay        border-bg-border         text-text-secondary',
  accent:  'bg-accent-subtle     border-accent-border     text-accent',
}

const sizeClasses: Record<BadgeSize, string> = {
  xs: 'px-1.5 py-px text-[10px] leading-4 gap-1',
  sm: 'px-2 py-0.5 text-caption gap-1',
}

export function Badge({ variant = 'neutral', size = 'sm', icon, children, className }: BadgeProps) {
  return (
    <span
      className={cn(
        'inline-flex items-center border rounded-sm font-label uppercase tracking-[0.05em]',
        variantClasses[variant],
        sizeClasses[size],
        className
      )}
    >
      {icon && <span className="flex-shrink-0">{icon}</span>}
      {children}
    </span>
  )
}