import Link from "next/link";
import { ThemeToggle } from "@/components/theme-toggler";
import Image from "next/image";
import { NavbarMobileBtn } from "./nav-mobile";
import { NavLink } from "./nav-link";
import { Logo } from "./logo";
import { PulicBetaBadge } from "./beta/badge";
import { useState } from "react";
import { MenuIcon, X } from "lucide-react";

export const Navbar = () => {
	return (
		<nav className="sticky z-40 top-0 flex items-center justify-between bg-background backdrop-blur-md">
			<Link
				href="/"
				className="md:border-r md:px-5 px-2.5 py-4 text-foreground md:col-span-2 shrink-0 transition-colors md:w-[--fd-sidebar-width]"
			>
				<div className="flex flex-col gap-2 w-full">
					<div className="flex items-center gap-2">
						<Logo />
						<p>BETTER-AUTH.</p>
					</div>
				</div>
			</Link>
			<div className="md:col-span-10 flex items-center justify-end sticky top-0 z-30 pb-3 w-full font-geist border-b border-black/10 transition duration-200 ease-in-out md:bg-transparent animate-header-slide-down-fade dark:border-white/10  md:backdrop-blur-md">
				<ul className="md:flex items-center divide-x w-max border-r hidden shrink-0">
					{navMenu.map((menu, i) => (
						<NavLink key={menu.name} href={menu.path}>
							{menu.name}
						</NavLink>
					))}
				</ul>
				<ThemeToggle />
				<NavbarMobileBtn />
			</div>
		</nav>
	);
};

export const navMenu = [
	{
		name: "helo_",
		path: "/",
	},
	{
		name: "docs",
		path: "/docs",
	},

	{
		name: "changelogs",
		path: "/changelogs",
	},
	{
		name: "community",
		path: "https://discord.gg/GYC3W7tZzb",
	},
];