import { auth, signOut } from "@/auth";
import { Brand } from "@/components/brand";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/theme-toggle";
import Link from "next/link";

export async function Header() {
  const session = await auth();
  const user = session?.user;

  return (
    <header className="sticky top-0 z-30 border-b-[0.5px] border-[var(--color-border-default)] bg-[color-mix(in_srgb,var(--color-bg-secondary)_82%,transparent)] backdrop-blur supports-[backdrop-filter]:bg-[color-mix(in_srgb,var(--color-bg-secondary)_70%,transparent)]">
      <div className="mx-auto flex h-14 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-8">
        <Brand />
        <div className="flex items-center gap-2">
          {user?.email ? (
            <span className="system-xs-regular hidden text-[var(--color-text-tertiary)] sm:inline">
              {user.email}
            </span>
          ) : null}
          <ThemeToggle />
          {user ? (
            <form
              action={async () => {
                "use server";
                await signOut({ redirectTo: "/login" });
              }}
            >
              <Button variant="secondary" size="sm" type="submit">
                Odhlásit
              </Button>
            </form>
          ) : (
            <Link href="/login">
              <Button variant="secondary" size="sm">
                Přihlásit se
              </Button>
            </Link>
          )}
        </div>
      </div>
    </header>
  );
}
