"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { LogoutButton } from "@/components/ui/LogoutButton";

interface PortalNavProps {
  userEmail: string;
}

const navLinks = [
  { href: "/portal/dashboard", label: "Dashboard" },
  { href: "/portal/clients", label: "Clients" },
];

export function PortalNav({ userEmail }: PortalNavProps) {
  const pathname = usePathname();

  return (
    <nav className="bg-[var(--navy)] text-white">
      <div className="flex items-center justify-between px-6 py-3">
        {/* Left: site name + nav links */}
        <div className="flex items-center gap-8">
          <span className="text-base font-semibold tracking-wide">
            Teressa Copeland
          </span>
          <div className="flex items-center gap-6">
            {navLinks.map(({ href, label }) => {
              const isActive = pathname.startsWith(href);
              return (
                <Link
                  key={href}
                  href={href}
                  className={`text-sm hover:opacity-80 transition-opacity pb-0.5 ${
                    isActive
                      ? "border-b-2 border-[var(--gold)] font-medium"
                      : "border-b-2 border-transparent"
                  }`}
                >
                  {label}
                </Link>
              );
            })}
          </div>
        </div>

        {/* Right: agent email + logout */}
        <div className="flex items-center gap-4">
          <span className="text-xs text-white/60">{userEmail}</span>
          <LogoutButton />
        </div>
      </div>
    </nav>
  );
}
