"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { navForPortal, type BeautyPortalId } from "@/modules/beauty/constants/portals";

export function MobilePortalFrame({
  portalId,
  children,
}: {
  portalId: BeautyPortalId;
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const nav = navForPortal(portalId)
    .filter((g) => g.href)
    .slice(0, 5);

  return (
    <div className="min-h-screen bg-[var(--canvas)] pb-20">
      <div className="mx-auto max-w-lg px-4 py-6">{children}</div>
      <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-[var(--border)] bg-[var(--surface)]/95 backdrop-blur">
        <div className="mx-auto flex max-w-lg items-stretch justify-around">
          {nav.map((item) => {
            const href = item.href!;
            const active = pathname === href || pathname.startsWith(`${href}/`);
            const Icon = item.icon;
            return (
              <Link
                key={href}
                href={href}
                className={cn(
                  "flex min-w-0 flex-1 flex-col items-center gap-0.5 px-1 py-2 text-[10px] font-medium",
                  active ? "text-[var(--beauty-accent)]" : "text-[var(--muted)]"
                )}
              >
                <Icon className="h-5 w-5" />
                <span className="truncate">{item.label}</span>
              </Link>
            );
          })}
        </div>
      </nav>
    </div>
  );
}