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

type BadgeVariant = 'success' | 'danger' | 'warning' | 'default';

interface StatusBadgeProps {
  children: React.ReactNode;
  variant?: BadgeVariant;
  className?: string;
  size?: 'sm' | 'md';
}

const variantStyles: Record<BadgeVariant, string> = {
  success: 'text-success bg-success/10',
  danger: 'text-danger bg-danger/10',
  warning: 'text-warning bg-warning/10',
  default: 'text-text-secondary bg-text-secondary/10',
};

const sizeStyles = {
  sm: 'px-2 py-0.5 text-xs',
  md: 'px-3 py-1 text-sm',
};

export function StatusBadge({ 
  children, 
  variant = 'default', 
  className,
  size = 'sm' 
}: StatusBadgeProps) {
  return (
    <span className={cn(
      'rounded-full font-medium',
      variantStyles[variant],
      sizeStyles[size],
      className
    )}>
      {children}
    </span>
  );
}

interface ConnectionStatusProps {
  connected: boolean;
  size?: 'sm' | 'md';
}

export function ConnectionStatus({ connected, size = 'sm' }: ConnectionStatusProps) {
  return (
    <StatusBadge variant={connected ? 'success' : 'danger'} size={size}>
      {connected ? 'Connected' : 'Disconnected'}
    </StatusBadge>
  );
}

interface HealthStatusProps {
  healthy: boolean;
  size?: 'sm' | 'md';
}

export function HealthStatus({ healthy, size = 'sm' }: HealthStatusProps) {
  return (
    <StatusBadge variant={healthy ? 'success' : 'danger'} size={size}>
      {healthy ? 'Healthy' : 'Unhealthy'}
    </StatusBadge>
  );
}

interface ServiceStatusIndicatorProps {
  status: 'running' | 'stopped' | 'error';
}

export function ServiceStatusIndicator({ status }: ServiceStatusIndicatorProps) {
  const statusColors = {
    running: 'bg-success',
    stopped: 'bg-text-muted',
    error: 'bg-danger',
  };

  return <div className={cn('w-3 h-3 rounded-full', statusColors[status])} />;
}