"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import type { Locale } from "@/lib/site-content";

function localize(locale: Locale, path: string) {
  if (!path || path === "/") {
    return `/${locale}`;
  }
  return `/${locale}${path}`;
}

function isActive(pathname: string, href: string) {
  if (href === "/") {
    return pathname === href;
  }
  return pathname === href || pathname.startsWith(`${href}/`);
}

export function MainNav({
  locale,
  labels,
}: {
  locale: Locale;
  labels: {
    home: string;
    docs: string;
    skills: string;
    console: string;
    pricing: string;
    billing?: string;
  };
}) {
  const pathname = usePathname();
  const items = [
    { href: localize(locale, "/"), label: labels.home },
    { href: localize(locale, "/docs"), label: labels.docs },
    { href: localize(locale, "/skills"), label: labels.skills },
    { href: localize(locale, "/console"), label: labels.console },
    { href: localize(locale, "/pricing"), label: labels.pricing },
  ];
  if (labels.billing) {
    items.push({ href: localize(locale, "/billing"), label: labels.billing });
  }

  return (
    <nav className="main-nav" aria-label="Primary">
      {items.map((item) => (
        <Link
          aria-current={isActive(pathname, item.href) ? "page" : undefined}
          className={`nav-link ${isActive(pathname, item.href) ? "nav-link-active" : ""}`}
          href={item.href}
          key={item.href}
        >
          {item.label}
        </Link>
      ))}
    </nav>
  );
}