"use client";

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

import { cn } from "@/lib/utils";

const PORTAL_TABS = [
  { href: "/dashboard/admins/portal/entitlements", label: "Entitlements" },
  { href: "/dashboard/admins/portal/roles", label: "Roles" },
  { href: "/dashboard/admins/portal/users", label: "Users" },
  { href: "/dashboard/admins/portal/catalog", label: "Route Catalog" },
] as const;

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

  return (
    <nav className="flex flex-wrap gap-2">
      {PORTAL_TABS.map((tab) => {
        const active = pathname === tab.href || pathname.startsWith(`${tab.href}/`);
        return (
          <Link
            key={tab.href}
            href={tab.href}
            className={cn(
              "rounded-full border px-3 py-1.5 text-sm transition-colors",
              active
                ? "border-primary bg-primary/10 text-primary"
                : "text-muted-foreground hover:bg-muted/50",
            )}
          >
            {tab.label}
          </Link>
        );
      })}
    </nav>
  );
}