import { WifiOff, Loader2 } from "lucide-react";
import type { ConnectionState } from "@/hooks/useConnectionStatus";

interface ConnectionBannerProps {
  state: ConnectionState;
}

export function ConnectionBanner({ state }: ConnectionBannerProps) {
  if (state === "connected") return null;

  return (
    <div
      className={`flex items-center justify-center gap-2 px-4 py-1.5 text-xs font-medium ${
        state === "disconnected"
          ? "bg-status-error-bg text-status-error-fg"
          : "bg-status-warning-bg text-status-warning-fg"
      }`}
    >
      {state === "disconnected" ? (
        <>
          <WifiOff className="h-3.5 w-3.5" />
          Offline — connection lost
        </>
      ) : (
        <>
          <Loader2 className="h-3.5 w-3.5 animate-spin" />
          Reconnecting...
        </>
      )}
    </div>
  );
}
