"use client";

import NextLink from "next/link";
import { usePathname } from "next/navigation";

const NAV_LINKS = [
  { href: "/login", label: "Login" },
  { href: "/sign-up", label: "Sign up" },
  { href: "/forgot-password", label: "Forgot password" },
  { href: "/session", label: "Session" },
  { href: "/session/activity", label: "Session activity" },
  { href: "/endpoint-lab", label: "Endpoint lab" },
  { href: "/schema-debug", label: "Schema debug" },
  { href: "/organizations", label: "Organizations" },
  { href: "/my-emails", label: "My emails" },
  { href: "/admin/emails", label: "Admin emails" },
];

export function AuthNavigationLinks() {
  const pathname = usePathname();

  return (
    <nav className="grid grid-cols-2 gap-2 text-sm sm:grid-cols-3 xl:grid-cols-4">
      {NAV_LINKS.map((link) => (
        <NextLink
          key={link.href}
          href={link.href}
          className={[
            "rounded-md border px-2 py-1 text-center transition-colors",
            pathname === link.href
              ? "border-slate-900 bg-slate-900 text-white"
              : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50",
          ].join(" ")}
        >
          {link.label}
        </NextLink>
      ))}
    </nav>
  );
}
