// ---------------------------------------------------------------------------
// Folder: components/app-shell
// File: TopNav.jsx
// Relative Path: components/app-shell/TopNav.jsx
// ---------------------------------------------------------------------------

import React from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import UserStatus from "@/components/app-shell/UserStatus";
import LogoutButton from "@/components/auth/LogoutButton";

/**
 * TopNav
 *
 * RHL-020:
 * - UserStatus now displays real session info (via AuthContext).
 * - Logout button is now functional (calls apiClient.logout + redirects to /login).
 *
 * Notes:
 * - Theme toggle is still a placeholder in this ticket.
 * - We keep this component server-renderable for stability and SSR tests.
 *   LogoutButton is a client component, but it does not require Next router hooks.
 */
export default function TopNav() {
	return (
		<header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur">
			<div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
				<div className="flex items-center gap-3">
					<Link href="/" className="font-semibold tracking-tight">
						RHL Lieferscheine
					</Link>
					<span className="text-xs text-muted-foreground">
						App shell scaffold
					</span>
				</div>

				<div className="flex items-center gap-2">
					<UserStatus />

					<Button
						variant="outline"
						size="sm"
						disabled
						aria-disabled="true"
						title="Theme toggle will be added later"
					>
						Theme
					</Button>

					<LogoutButton />
				</div>
			</div>
		</header>
	);
}