'use client';

import { LucideIcon, Wifi, WifiOff, Loader2 } from 'lucide-react';

type StatusType = 'connected' | 'disconnected' | 'checking' | 'unknown';

interface ConnectionStatusProps {
  label: string;
  status: StatusType;
  latency?: number;
  details?: string;
  icon?: LucideIcon;
}

const statusConfig: Record<StatusType, { color: string; bg: string; dot: string; icon: LucideIcon }> = {
  connected: {
    color: 'text-emerald-400',
    bg: 'bg-emerald-500/10',
    dot: 'bg-emerald-400',
    icon: Wifi,
  },
  disconnected: {
    color: 'text-red-400',
    bg: 'bg-red-500/10',
    dot: 'bg-red-400',
    icon: WifiOff,
  },
  checking: {
    color: 'text-amber-400',
    bg: 'bg-amber-500/10',
    dot: 'bg-amber-400',
    icon: Loader2,
  },
  unknown: {
    color: 'text-slate-400',
    bg: 'bg-slate-500/10',
    dot: 'bg-slate-400',
    icon: WifiOff,
  },
};

export function ConnectionStatus({ label, status, latency, details, icon: CustomIcon }: ConnectionStatusProps) {
  const config = statusConfig[status];
  const StatusIcon = CustomIcon ?? config.icon;

  return (
    <div className={`flex items-center gap-3 rounded-lg border border-white/5 ${config.bg} px-3 py-2`}>
      <div className="relative flex h-8 w-8 items-center justify-center">
        <StatusIcon className={`h-4 w-4 ${config.color} ${status === 'checking' ? 'animate-spin' : ''}`} />
        <span className={`absolute bottom-0 right-0 h-2 w-2 rounded-full ${config.dot} ${
          status === 'connected' ? 'animate-pulse' : ''
        }`} />
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className={`text-xs font-medium ${config.color}`}>{label}</span>
          {latency !== undefined && (
            <span className="text-[10px] font-mono text-slate-500">{latency}ms</span>
          )}
        </div>
        {details && (
          <p className="truncate text-[10px] text-slate-500">{details}</p>
        )}
      </div>
    </div>
  );
}