"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { YaltopiaFooter } from "./YaltopiaFooter";
import type { LucideIcon } from "lucide-react";
import { Shield } from "lucide-react";

export function PortalShell({
  brand,
  navItems,
  children,
}: {
  brand: string;
  navItems: { href: string; label: string; icon: LucideIcon }[];
  children: React.ReactNode;
}) {
  const pathname = usePathname();

  return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-1">
        <aside className="flex w-60 flex-col border-r border-white/10 bg-black/30">
          <div className="flex h-14 items-center gap-2 border-b border-white/10 px-4">
            <Shield className="h-6 w-6 text-cyan-400" />
            <div>
              <p className="text-xs text-[var(--color-muted)]">Yaltopia FIFA</p>
              <p className="text-sm font-semibold">{brand}</p>
            </div>
          </div>
          <nav className="flex-1 space-y-1 p-3">
            {navItems.map(({ href, label, icon: Icon }) => {
              const active =
                pathname === href || pathname.startsWith(href + "/");
              return (
                <Link
                  key={href}
                  href={href}
                  className={cn(
                    "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors",
                    active
                      ? "bg-cyan-500/15 text-cyan-400"
                      : "text-[var(--color-muted)] hover:bg-white/5 hover:text-foreground"
                  )}
                >
                  <Icon className="h-4 w-4 shrink-0" />
                  {label}
                </Link>
              );
            })}
          </nav>
        </aside>
        <div className="flex flex-1 flex-col">
          <main className="flex-1 p-6 lg:p-8">{children}</main>
          <YaltopiaFooter />
        </div>
      </div>
    </div>
  );
}