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";
import QuickNav from "@/components/app-shell/QuickNav";

export default function TopNav() {
	return (
		<header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur">
			{/* 
				TopNav alignment strategy (2xl+):
				- Use the same 40% center column as the AppShell content grid.
				- This keeps header content perfectly aligned with Explorer/Search.

				Below 2xl:
				- Full width for usability.
			*/}
			<div className="px-4">
				<div className="mx-auto grid h-14 w-full items-center 2xl:grid-cols-[1fr_minmax(0,40%)_1fr]">
					<div className="flex items-center justify-between gap-3 2xl:col-start-2">
						<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 />

							<QuickNav />

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

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