import React from "react";
import { Button } from "./ui/button";
import Link from "next/link";
import UserPopover from "@/app/_components/profile-popover";
import { appConfig } from "@/config/app.config";
import NavLink from "./nav-link";
import { api } from "@/trpc/server";
import { Icons } from "./icons";
import { appRoutes } from "@/config/app.routes";

async function Navbar() {
  const sessionPlayer = await api.player.getBySession();
  const currentLobby = sessionPlayer ? await api.lobby.getCurrentLobby() : null;

  return (
    <nav className="flex w-full items-center justify-center p-4">
      <div className="container-bg flex h-10 w-full max-w-sm items-center justify-between gap-2 overflow-hidden rounded-full border-2">
        <menu className="flex items-center">
          {appConfig.navigation.map((navLink, idx) => (
            <li key={idx}>
              <NavLink {...navLink} />
            </li>
          ))}
        </menu>

        <div className="bg-border/10 border-border/20 flex items-center rounded-full border-l-2">
          {currentLobby ? (
            <Link href={appRoutes.currentlobby}>
              <div className="border-border/20 flex h-10 items-center justify-center gap-2 pr-2 pl-4 font-semibold">
                <Icons.logo className="size-4" />
                <span>Lobby</span>
              </div>
            </Link>
          ) : null}
          {sessionPlayer ? (
            <UserPopover player={sessionPlayer} />
          ) : (
            <Button asChild className="bg-primary font-black">
              <Link href="/api/auth/signin">Sign In</Link>
            </Button>
          )}
        </div>
      </div>
    </nav>
  );
}

export default Navbar;
