import { ExitIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { prisma } from "@repo/db";
import { ChangelogWrapper } from "_components/navbar/ChangelogWrapper";
import ModeSwitchDropdown from "_components/navbar/ModeSwitchDropdown";

export default async function Navbar({ children }: { children: React.ReactNode }) {
	const latestChangelog = await prisma.changelog.findFirst({
		orderBy: {
			createdAt: "desc",
		},
	});
	return (
		<div className="navbar bg-base-100 flex justify-between gap-5 shadow-sm">
			<div className="flex items-center gap-2">
				<div>
					<p className="text-xl font-semibold normal-case">VAR Operations Center</p>
					<ChangelogWrapper latestChangelog={latestChangelog} />
				</div>
			</div>
			<div className="flex items-center gap-2">
				{children}
				<ModeSwitchDropdown className="dropdown-center" btnClassName="btn-ghost" />
				<Link href={"/logout"}>
					<button className="btn btn-ghost">
						<ExitIcon className="h-4 w-4" />
					</button>
				</Link>
			</div>
		</div>
	);
}