import { Link, useLocation } from "react-router";
import { Logo } from "./Logo";
import { ThemeToggle } from "./ThemeToggle";
import { useSession } from "@/lib/use-session";
import { ADMIN_ENTRY_PATH } from "@/lib/admin-entry";

const nav = [
  { href: "/kampanyok", label: "Projektek" },
  { href: "/sikersztorik", label: "Sikersztorik" },
  { href: "/hogyan-mukodik", label: "Hogyan működik?" },
];

export function SiteHeader() {
  const { isAdmin: admin } = useSession();
  const onAdminEntry = useLocation().pathname === ADMIN_ENTRY_PATH;
  return (
    <header className="sticky top-0 z-40 border-b border-line bg-bg/85 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center gap-7 px-5 py-3.5">
        <Link to="/" className="shrink-0">
          <Logo size="sm" />
        </Link>
        <nav className="hidden md:block">
          <ul className="flex gap-6 text-sm font-medium text-muted">
            {nav.map((n) => (
              <li key={n.href}>
                <Link to={n.href} className="transition-colors hover:text-fg">
                  {n.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
        <div className="ml-auto flex items-center gap-3">
          <ThemeToggle />
          {/* Signing in does nothing for a visitor: a session only unlocks
              /api/admin/*, and backing a campaign is planned to need no
              account at all. So the link is offered to an admin, or on the
              admin entry page, and to nobody else. */}
          {(admin || onAdminEntry) && (
            <Link
              to={admin ? "/admin" : "/belepes"}
              className="hidden text-sm font-medium text-muted transition-colors hover:text-fg sm:block"
            >
              {admin ? "Admin" : "Belépés"}
            </Link>
          )}
        </div>
      </div>
    </header>
  );
}