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">
			<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 />

					<QuickNav />

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

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