"use client";

import Link from "next/link";
import { UserNav } from "@/components/UserNav";
import { ThemeToggle } from "@/components/theme-toggle";

interface NavbarProps {
  username: string;
  role: string;
}

export function Navbar({ username, role }: NavbarProps) {
  return (
    <nav
      className="border-b bg-background"
      aria-label="Hauptnavigation"
    >
      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
        <div className="flex items-center gap-6">
          <Link
            href="/search"
            className="text-lg font-bold tracking-tight"
          >
            archivmail
          </Link>
          {role !== "superadmin" && (
            <Link
              href="/search"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Suche
            </Link>
          )}
          {(role === "user" || role === "domain_admin") && (
            <Link
              href="/imap"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              IMAP Import
            </Link>
          )}
          {(role === "user" || role === "domain_admin") && (
            <Link
              href="/pop3"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              POP3 Import
            </Link>
          )}
          {(role === "admin" || role === "domain_admin" || role === "domain_auditor" || role === "superadmin") && (
            <Link
              href="/admin"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Admin
            </Link>
          )}
        </div>
        <div className="flex items-center gap-2">
          <ThemeToggle />
          <UserNav username={username} role={role} />
        </div>
      </div>
    </nav>
  );
}
