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

import React from 'react';
import { Wifi, WifiOff, Radio } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';

interface LiveDataIndicatorProps {
  status: 'connecting' | 'connected' | 'disconnected' | 'simulated';
  className?: string;
}

export function LiveDataIndicator({ status, className }: LiveDataIndicatorProps) {
  const statusConfig = {
    connecting: {
      icon: Wifi,
      label: 'Connecting...',
      color: 'text-yellow-500',
      pulse: true,
    },
    connected: {
      icon: Wifi,
      label: 'Live Data',
      color: 'text-green-500',
      pulse: true,
    },
    disconnected: {
      icon: WifiOff,
      label: 'Disconnected',
      color: 'text-destructive',
      pulse: false,
    },
    simulated: {
      icon: Radio,
      label: 'Simulated Data',
      color: 'text-primary',
      pulse: true,
    },
  };

  const config = statusConfig[status];
  const Icon = config.icon;

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <div className={cn('flex items-center gap-2', className)}>
            <div className="relative">
              <Icon className={cn('h-4 w-4', config.color)} />
              {config.pulse && (
                <span className={cn(
                  'absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full',
                  status === 'connected' ? 'bg-green-500' : 'bg-primary',
                  'animate-pulse'
                )} />
              )}
            </div>
            <span className={cn('text-xs font-medium', config.color)}>
              {status === 'simulated' ? 'LIVE' : status.toUpperCase()}
            </span>
          </div>
        </TooltipTrigger>
        <TooltipContent>
          <p>{config.label}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}