"use client"
import Link from "next/link"
import AdminWrap from "./AdminWrap"
import { ClerkLoaded, Show, SignInButton, SignOutButton, SignUpButton, UserButton } from "@clerk/nextjs"
import { Button } from "~/components/ui/button"
import { ThemeSwitch } from "./ThemeSwitch"

export default function TopNav() {
	return (
		<div className="fixed lg:w-full right-0 z-50 lg:bg-background">
			<nav className="flex flex-col-reverse lg:flex-row flex-wrap w-20 lg:w-full outline-1 lg:h-10 h-full">
				<div className="flex flex-wrap lg:h-full w-20 lg:w-fit lg:flex-row">
					<Button className="flex h-10 lg:h-full w-full lg:w-20" asChild variant="outline">
						<Link href={"/blog"}> Blog </Link>
					</Button>
					<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
						<Link href={"/cv"}> CV </Link>
					</Button>
					<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
						<Link href={"/projects"}> Projects </Link>
					</Button>
				</div>
				<div className="flex flex-col-reverse flex-wrap lg:h-full w-20 lg:w-fit lg:flex-row lg:ml-auto">
					<AdminWrap>
						<Button className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
							<Link className="" href={"/admin"}> Admin </Link>
						</Button>
					</AdminWrap>
					<Show when="signed-in">
						<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant={"outline"}>
							<SignOutButton />
						</Button>
					</Show>
					<Show when="signed-out">
						<Button asChild className="flex h-10 lg:h-full cursor-pointer lg:w-20" variant={"outline"}>
							<SignInButton mode="modal" />
						</Button>
						<Button asChild className="flex h-10 lg:h-full cursor-pointer lg:w-20" variant={"outline"}>
							<SignUpButton mode="modal" />
						</Button>
					</Show>
					<ThemeSwitch />
					<ClerkLoaded>
						<Show when="signed-in">
							<Button asChild className="flex h-10 lg:h-full cursor-pointer lg:w-20 content-center" variant={"outline"}>
								<div>
									<UserButton />
								</div>
							</Button>
						</Show>
					</ClerkLoaded>
				</div>
			</nav>
		</div>
	)
}