"use client";

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

import { operationsNavItems } from "@/navigation/operations/operations-sidebar-items";
import { cn } from "@/lib/utils";

/** Bottom nav for portrait tablet / phone */
export function OperationsMobileNav() {
  const pathname = usePathname();
  const HomeIcon = operationsNavItems[0].icon;

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-40 flex border-t bg-zinc-950 px-1 py-1 md:hidden">
      <Link
        href="/operations"
        className={cn(
          "flex min-h-[48px] flex-1 flex-col items-center justify-center gap-0.5 rounded-lg text-[10px] font-medium",
          pathname === "/operations" ? "text-amber-400" : "text-white/45",
        )}
      >
        <HomeIcon className="size-5" />
        <span>Home</span>
      </Link>
      {operationsNavItems.slice(1).map((item) => {
        const isActive = pathname.startsWith(item.url);
        return (
          <Link
            key={item.url}
            href={item.url}
            className={cn(
              "flex min-h-[48px] flex-1 flex-col items-center justify-center gap-0.5 rounded-lg text-[10px] font-medium",
              isActive ? "text-amber-400" : "text-white/45",
            )}
          >
            <item.icon className="size-5" />
            <span className="truncate px-0.5">{item.title.split(" ")[0]}</span>
          </Link>
        );
      })}
    </nav>
  );
}