// components/NavigationComponent.js
import Link from "next/link";
import Image from "next/image";
import HelpButton from "./HelpButton";
import LoginButton from "./LoginButton";
import LogoutButton from "./LogoutButton";

export default function NavigationComponent() {
	return (
		<nav className="bg-slate-50 border-b-1 border-slate-200">
			<div className="w-screen px-6 flex justify-between items-center">
				{/* Logo */}
				<div className="text-white text-xl font-bold">
					<Link href="/">
						<Image
							src="/images/LogoNav.png"
							alt="Logo von Reifen Helm"
							width={250}
							height={150}
						/>
					</Link>
				</div>

				{/* Navigation Links */}
				<div className="flex items-center space-x-4">
					{/* Help Button with Modal */}
					<HelpButton />

					<h3 className="font-poppins font-semibold">Lieferscheine Service</h3>
					<div className="h-10 border-1 border-slate-300"></div>

					{/* Login Button */}
					<LoginButton />

					{/* Logout Button */}
					<LogoutButton />
				</div>
			</div>
		</nav>
	);
}