rfid-database/src/components/AppHeader.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { signOut, useSession } from "next-auth/react";

export function AppHeader() {
  const { data: session } = useSession();
  const pathname = usePathname();
  if (pathname === "/login") return null;

  return (
    <header
      style={{
        borderBottom: "1px solid var(--border)",
        background: "rgba(15, 20, 25, 0.85)",
        backdropFilter: "blur(8px)",
        position: "sticky",
        top: 0,
        zIndex: 20,
      }}
    >
      <div
        className="container"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0.75rem 0",
          gap: "1rem",
        }}
      >
        <Link href="/" style={{ display: "flex", alignItems: "baseline", gap: "0.5rem" }}>
          <span style={{ fontWeight: 800, letterSpacing: "-0.03em", fontSize: "1.1rem" }}>
            RFID DB
          </span>
          <span className="muted" style={{ fontSize: "0.75rem" }}>
            tag dumps
          </span>
        </Link>
        <nav className="row" style={{ gap: "0.25rem" }}>
          <Link className="btn btn-ghost" href="/">
            Sites
          </Link>
          <Link className="btn btn-ghost" href="/tags/new">
            New tag
          </Link>
          <Link className="btn btn-ghost" href="/settings">
            Settings
          </Link>
          {session?.user && (
            <button
              type="button"
              className="btn btn-ghost"
              onClick={() => signOut({ callbackUrl: "/login" })}
            >
              Sign out
            </button>
          )}
        </nav>
      </div>
    </header>
  );
}