import Image from "next/image";
import Link from "next/link";
import { getMe, isModerator } from "@/lib/api";
import { buttonVariants } from "@/components/ui/button";
import { NavLink, ProfileMenu } from "./header-client";
import logo from "./t5de.png";

export function Logo({ className }: { className?: string }) {
  return <Image src={logo} alt="T5DE" priority className={className ?? "size-9"} />;
}

export async function Header() {
  const me = await getMe();
  return (
    <header className="border-b">
      <div className="mx-auto flex max-w-5xl flex-wrap items-center gap-x-6 gap-y-2 px-4 py-3 sm:px-6">
        <Link href="/" aria-label="T5DE Hub home" className="shrink-0">
          <Logo />
        </Link>
        <nav className="order-last flex w-full flex-wrap items-center gap-1 text-sm sm:order-none sm:w-auto">
          <NavLink href="/online">Online</NavLink>
          <NavLink href="/rooms">Rooms</NavLink>
          <NavLink href="/products">Products</NavLink>
          <NavLink href="/catalogs">Catalogs</NavLink>
        </nav>
        <div className="ml-auto flex items-center gap-2 text-sm">
          <a href="https://t5de.dev/download" className={buttonVariants({ variant: "ghost" })}>
            Download
          </a>
          {me ? (
            <ProfileMenu username={me.username} picture={me.picture} console={isModerator(me)} />
          ) : (
            <>
              <Link href="/signin" className={buttonVariants({ variant: "ghost" })}>
                Sign in
              </Link>
              <Link href="/signup" className={buttonVariants()}>
                Create account
              </Link>
            </>
          )}
        </div>
      </div>
    </header>
  );
}