"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { Logo } from "@/components/Logo";
import { NAV_LINKS } from "@/components/nav-links";
import { ThemeToggle } from "@/components/ThemeToggle";

export function Nav() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  
  useEffect(() => {
    setOpen(false);
  }, [pathname]);

  function current(href: string) {
    return pathname === href || pathname === `${href}/` ? "page" : undefined;
  }

  return (
    <>
      <header className="nav">
        <div className="rail nav__in">
          <Link className="brand" href="/">
            <Logo />
            <b>Vantage</b>
          </Link>

          <nav className="nav__links" aria-label="Main">
            {NAV_LINKS.map((link) => (
              <Link key={link.href} href={link.href} aria-current={current(link.href)}>
                {link.label}
              </Link>
            ))}
          </nav>

          <ThemeToggle />

          <button
            type="button"
            className="icon-btn nav__menu"
            aria-expanded={open}
            aria-controls="nav-drawer"
            onClick={() => setOpen((v) => !v)}
          >
            {open ? "Close" : "Menu"}
          </button>

          <Link className="btn btn--solid btn--sm nav__cta" href="/start">
            Create organisation
          </Link>
        </div>
      </header>

      {open && (
        <div className="drawer" id="nav-drawer">
          <div className="rail">
            <nav aria-label="Main, mobile">
              {NAV_LINKS.map((link) => (
                <Link key={link.href} href={link.href} aria-current={current(link.href)}>
                  {link.label}
                </Link>
              ))}
              <Link className="btn btn--solid" href="/start">
                Create organisation
              </Link>
            </nav>
          </div>
        </div>
      )}
    </>
  );
}