apps/matrix-frontend/src/components/StatusIndicator.tsx

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

interface StatusIndicatorProps {
  status: 'online' | 'offline' | 'warning' | 'loading';
  label: string;
  className?: string;
}

const StatusIndicator = ({ status, label, className }: StatusIndicatorProps) => {
  const statusColors = {
    online: 'bg-primary',
    offline: 'text-destructive bg-destructive',
    warning: 'bg-warning',
    loading: 'bg-accent animate-pulse',
  };

  return (
    <div className={cn("flex items-center gap-2", className)}>
      <div className="relative">
        <div className={cn(
          "w-2 h-2 rounded-full",
          statusColors[status]
        )} />
        {status === 'online' && (
          <div className="absolute inset-0 w-2 h-2 rounded-full bg-primary animate-ping opacity-75" />
        )}
      </div>
      <span className="font-mono text-xs uppercase tracking-wider text-muted-foreground">
        {label}
      </span>
    </div>
  );
};

export default StatusIndicator;