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

/**
 * TopNav
 *
 * RHL-019:
 * - App branding
 * - User status placeholder (later: getMe + role/branch info)
 * - Logout button placeholder (later: wired to apiClient.logout)
 * - Theme toggle placeholder (optional; can be replaced by the real ModeToggle)
 *
 * Test/runtime note:
 * - See AppShell.jsx for details why we import React explicitly.
 */
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>

					<Button
						variant="outline"
						size="sm"
						disabled
						aria-disabled="true"
						title="Logout wiring will be added later"
					>
						Logout
					</Button>
				</div>
			</div>
		</header>
	);
}