"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import type { AuthUser } from "@/lib/auth/auth-context";
import { MoreSheet } from "./more-sheet";
import { bottomNavItems, isNavActive } from "./nav-config";

export function BottomNav({ user }: { user: Pick<AuthUser, "permissions"> }) {
  const pathname = usePathname();

  return (
    // Height and padding include the iOS home-indicator inset, so the labels
    // stay tappable above it; --bottom-nav-height is shared with the content
    // padding, StickySubmit and the quick-add button.
    <nav
      aria-label="Hauptnavigation"
      className="fixed inset-x-0 bottom-0 z-30 flex h-(--bottom-nav-height) border-t bg-background pb-(--safe-area-bottom) sm:hidden"
    >
      {bottomNavItems().map((item) => {
        const Icon = item.icon;
        const isActive = isNavActive(pathname, item.href);
        return (
          <Link
            key={item.href}
            href={item.href}
            aria-current={isActive ? "page" : undefined}
            className={cn(
              "flex flex-1 flex-col items-center justify-center gap-1 text-xs",
              isActive ? "text-primary-ink" : "text-muted-foreground",
            )}
          >
            <Icon className="size-5" aria-hidden="true" />
            {item.shortLabel ?? item.label}
          </Link>
        );
      })}
      <MoreSheet user={user} />
    </nav>
  );
}