import Link from "next/link";
import { Gauge, MonitorPlay, Shield, UserRoundPlus, UsersRound } from "lucide-react";

const nav = [
  { href: "/dashboard", label: "Dashboard", icon: Gauge },
  { href: "/rooms/@admin", label: "Rooms", icon: MonitorPlay },
  { href: "/friends", label: "Friends", icon: UsersRound },
  { href: "/admin", label: "Admin", icon: Shield },
  { href: "/setup", label: "Setup", icon: UserRoundPlus }
];

export function AppShell({ children, active = "Dashboard" }: { children: React.ReactNode; active?: string }) {
  return (
    <div className="app-shell">
      <aside className="sidebar">
        <Link className="brand" href="/dashboard">
          <span className="brand-mark">WL</span>
          <span>WatchLink</span>
        </Link>
        <nav className="nav-list" aria-label="Primary">
          {nav.map((item) => {
            const Icon = item.icon;
            return (
              <Link key={item.href} href={item.href} className={`nav-item ${active === item.label ? "active" : ""}`}>
                <Icon size={17} />
                {item.label}
              </Link>
            );
          })}
        </nav>
      </aside>
      <main className="main">{children}</main>
    </div>
  );
}