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

type StatusVariant = 'critical' | 'warning' | 'good' | 'info' | 'neutral'

const variantMap: Record<StatusVariant, string> = {
  critical:
    'bg-status-critical-bg text-status-critical-text border-status-critical-border',
  warning:
    'bg-status-warning-bg text-status-warning-text border-status-warning-border',
  good:
    'bg-status-good-bg text-status-good-text border-status-good-border',
  info:
    'bg-status-info-bg text-status-info-text border-status-info-border',
  neutral:
    'bg-muted text-muted-foreground border-border',
}

const dotMap: Record<StatusVariant, string> = {
  critical: 'bg-status-critical-dot',
  warning: 'bg-status-warning-dot',
  good: 'bg-status-good-dot',
  info: 'bg-status-info-dot',
  neutral: 'bg-muted-foreground',
}

interface StatusBadgeProps {
  variant?: StatusVariant
  /** 좌측 상태 점 표시 */
  withDot?: boolean
  size?: 'sm' | 'md'
  className?: string
  children: React.ReactNode
}

export function StatusBadge({
  variant = 'neutral',
  withDot = false,
  size = 'md',
  className,
  children,
}: StatusBadgeProps) {
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full border font-medium whitespace-nowrap',
        size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-xs',
        variantMap[variant],
        className,
      )}
    >
      {withDot && (
        <span
          aria-hidden
          className={cn('inline-block w-1.5 h-1.5 rounded-full', dotMap[variant])}
        />
      )}
      {children}
    </span>
  )
}