import Link from "next/link";
import Image from "next/image";
import { Suspense } from "react";
import { AuthStatus } from "@/components/layout/auth-status";
import { MobileNav } from "@/components/layout/mobile-nav";
import { NavLinks } from "@/components/layout/nav-links";
import { StickyHeader } from "@/components/layout/sticky-header";
import { getPublicGeneralSettings } from "@/lib/api/cms";
import { FOCUS_RING_CLASSES } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

export async function Navbar() {
  const { data: settings } = await getPublicGeneralSettings();

  return (
    <StickyHeader>
      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-3 2xl:max-w-7xl">
        <Link
          href="/"
          className={cn("flex items-center gap-2 rounded transition-opacity hover:opacity-80", FOCUS_RING_CLASSES)}
        >
          {settings.navbar_logo_url ? (
            // eslint-disable-next-line @next/next/no-img-element -- admin-provided URL, not on next/image allowlist
            <img src={settings.navbar_logo_url} alt={settings.platform_name ?? "Kolaborativ"} className="h-8 w-auto" />
          ) : (
            <Image src="/kolabora-mark.svg" alt="Kolabora" width={40} height={31} priority />
          )}
        </Link>

        <nav className="hidden items-center gap-6 text-sm font-medium sm:flex">
          <NavLinks />
        </nav>

        <div className="flex items-center gap-2">
          <Suspense fallback={<div className="h-9 w-24" />}>
            <AuthStatus />
          </Suspense>
          <MobileNav />
        </div>
      </div>
    </StickyHeader>
  );
}