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 displays session info (via AuthContext).
 * - Logout button is functional (calls apiClient.logout + redirects to /login).
 *
 * UX rule:
 * - All user-facing text must be German.
 */
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">
						Lieferschein-Explorer
					</span>
				</div>

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

					<Button
						variant="outline"
						size="sm"
						disabled
						aria-disabled="true"
						title="Design-Umschaltung kommt später"
					>
						Design
					</Button>

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