"use client";

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

import { useSuperAdminSession } from "@/components/auth/session-context";
import { dashboardNav } from "@/lib/navigation";
import { matchesPermissions } from "@/lib/permissions";
import { cn } from "@/lib/utils";

export function MobileNav() {
  const pathname = usePathname();
  const { permissions } = useSuperAdminSession();
  const accessibleNav = useMemo(
    () =>
      dashboardNav.filter((item) =>
        matchesPermissions(permissions, item.requiredPermissions, item.permissionMode),
      ),
    [permissions],
  );

  return (
    <div className="mb-4 flex gap-2 overflow-x-auto pb-1 lg:hidden">
      {accessibleNav.map((item) => {
        const active = pathname === item.href;
        return (
          <Link
            key={item.href}
            href={item.href}
            className={cn(
              "whitespace-nowrap rounded-full border px-3 py-1.5 text-xs",
              active ? "border-primary/40 bg-primary/20 text-primary" : "border-border bg-card text-muted-foreground",
            )}
          >
            {item.label}
          </Link>
        );
      })}
    </div>
  );
}