import React from "react";
import Link from "next/link";
import Image from "next/image";

import QuickNav from "@/components/app-shell/QuickNav";
import UserStatus from "@/components/app-shell/UserStatus";
import ThemeToggleButton from "@/components/app-shell/ThemeToggleButton";
import SessionIndicator from "@/components/app-shell/SessionIndicator";

import { TooltipProvider } from "@/components/ui/tooltip";
import { TOOLTIP_DELAY_MS } from "@/lib/frontend/ui/uxTimings";

export default function TopNav() {
	return (
		<header className="sticky top-0 z-50 w-full border-b bg-background">
			<TooltipProvider delayDuration={TOOLTIP_DELAY_MS}>
				<div className="px-4">
					<div className="mx-auto grid h-14 w-full items-center 2xl:grid-cols-[1fr_minmax(0,45%)_1fr]">
						<div className="flex items-center justify-between gap-4 2xl:col-start-2">
							<div className="flex items-center gap-2">
								<Link
									href="/"
									aria-label="Startseite"
									className="hover:cursor-pointer"
								>
									<div className="relative h-10 w-16">
										<Image
											src="/brand/logo-blackNav.png"
											alt="Firmenlogo"
											fill
											sizes="64px"
											className="object-contain dark:hidden"
											priority
										/>
										<Image
											src="/brand/logo-whiteNav.png"
											alt="Firmenlogo"
											fill
											sizes="64px"
											className="hidden object-contain dark:block"
											priority
										/>
									</div>
								</Link>

								<nav aria-label="Hauptnavigation" className="flex items-center">
									<QuickNav />
								</nav>
							</div>

							<div className="flex items-center gap-3">
								<div className="flex items-center gap-3" aria-label="Aktionen">
									<SessionIndicator />
									<ThemeToggleButton />
								</div>

								<div className="h-6 w-px bg-border" aria-hidden="true" />

								<UserStatus />
							</div>
						</div>
					</div>
				</div>
			</TooltipProvider>
		</header>
	);
}