"use client";
import { usePathname, useRouter } from "next/navigation";
import { ThemeToggle } from "@/components/theme/toggle";
import { Button } from "@/components/ui/button";
import { LogOut } from "lucide-react";
import { apiMutate } from "@/lib/api";
const breadcrumbMap: Record<string, string> = {
overview: "Overview",
documents: "Documents",
audit: "Audit Log",
metrics: "Metrics",
cache: "Cache",
config: "Configuration",
proxy: "Proxy Servers",
};
export function Topbar() {
const pathname = usePathname();
const router = useRouter();
const segment = pathname.split("/").filter(Boolean).pop() || "overview";
const title = breadcrumbMap[segment] || segment;
const handleLogout = async () => {
try {
await apiMutate("/auth/logout");
} catch {}
router.push("/login");
};
return (
<header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-zinc-200 bg-white/80 px-6 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/80">
<div>
<h1 className="text-lg font-semibold">{title}</h1>
<p className="text-xs text-zinc-400">Dashboard / {title}</p>
</div>
<div className="flex items-center gap-2">
<ThemeToggle />
<Button variant="ghost" size="icon" onClick={handleLogout} aria-label="Logout">
<LogOut size={18} />
</Button>
</div>
</header>
);
}
