import Link from "next/link";
import type { Surface, SessionWithExtras } from "@/lib/session";
import { canSee } from "@/lib/session";

type NavLink = {
  href: string;
  label: string;
  surface: Surface;
};

export function Nav({ slug, session }: { slug: string; session: SessionWithExtras }) {
  const links: NavLink[] = [
    { href: `/${slug}/dashboard`,    label: "Dashboard",    surface: "dashboard" },
    { href: `/${slug}/products`,     label: "Products",     surface: "products" },
    { href: `/${slug}/catalog`,      label: "Catalog",      surface: "catalog" },
    { href: `/${slug}/projects`,     label: "Projects",     surface: "projects" },
    { href: `/${slug}/settings`,     label: "Settings",     surface: "settings" },
    { href: `/${slug}/settings/users`,   label: "Users",        surface: "users" },
    { href: `/${slug}/settings/api-keys`,  label: "API keys",   surface: "api-keys" },
    { href: `/${slug}/settings/integrations`, label: "Integrations", surface: "integrations" },
    { href: `/${slug}/billing`,      label: "Billing",      surface: "billing" },
    { href: `/${slug}/audit`,        label: "Audit log",    surface: "audit" },
    { href: `/${slug}/support`,      label: "Support",      surface: "support" },
  ];
  const visible = links.filter((l) => canSee(session, l.surface));

  return (
    <nav style={{ width: 220, padding: 16, borderRight: "1px solid #eaeaea", background: "white" }}>
      <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
        {visible.map((l) => (
          <li key={l.href} style={{ margin: "8px 0" }}>
            <Link href={l.href} style={{ color: "#0070f3", textDecoration: "none" }}>
              {l.label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}