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

export default function TopNav() {
	return (
		<header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur">
			<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="/"
								title="Startseite"
								className="hover:cursor-pointer"
							>
								{/* 
									Logo rendering:
									- Use `fill` so we don't need to hardcode width/height for string src.
									- This avoids Next/Image runtime errors and keeps aspect ratio via object-contain. :contentReference[oaicite:2]{index=2}
								*/}
								<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">
							{/* Icon-only theme toggle */}
							<ThemeToggleButton />

							{/* User is now the dropdown trigger (settings/logout) */}
							<UserStatus />
						</div>
					</div>
				</div>
			</div>
		</header>
	);
}