import { Moon, Shield, ShieldOff, Sun, Wifi, WifiOff } from "lucide-react";
import type { VoiceStatus } from "../entities/voice/types.js";
import { useTheme } from "../shared/hooks/useTheme";
import { cn } from "../shared/lib/utils";
import { Badge } from "../shared/ui";
import type { WsStatus } from "../shared/ws/socket";
/* ─── Theme Toggle ─────────────────────────────────────────────────────── */
function ThemeToggle() {
const { resolvedTheme, toggle } = useTheme();
return (
);
}
/* ─── WS Indicator ─────────────────────────────────────────────────────── */
function WsIndicator({ status }: { status: WsStatus }) {
const isConnected = status === "connected";
return (
{isConnected ? (
) : (
)}
{status === "connected"
? "Online"
: status === "connecting"
? "Nyambung..."
: status === "error"
? "Error"
: "Putus"}
);
}
/* ─── Voice Indicator ──────────────────────────────────────────────────── */
function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
const isConnected = voiceStatus.connected;
return (
{isConnected ? (
) : (
)}
{isConnected
? voiceStatus.activeChannelName || "Tersambung"
: "Siaga"}
);
}
/* ─── Main Header ──────────────────────────────────────────────────────── */
interface HeaderProps {
wsStatus: WsStatus;
voiceStatus: VoiceStatus;
}
export function Header({ wsStatus, voiceStatus }: HeaderProps) {
return (
);
}
{/* ── Right: Status + Theme ──────────────────────────────────── */}