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

export function AppShell({
  children,
  active = "Dashboard",
  isAdmin = false,
  roomHref = "/dashboard",
  userName
}: {
  children: React.ReactNode;
  active?: string;
  isAdmin?: boolean;
  roomHref?: string;
  userName?: string;
}) {
  const nav = [
    { href: "/dashboard", label: "Dashboard", icon: Gauge },
    { href: roomHref, label: "Rooms", icon: MonitorPlay },
    { href: "/friends", label: "Friends", icon: UsersRound }
  ];
  const visibleNav = isAdmin
    ? [nav[0], nav[1], nav[2], { href: "/admin", label: "Admin", icon: Shield }]
    : nav;

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <Link className="brand" href="/dashboard">
          <span className="brand-mark" aria-hidden="true" />
          <span>WatchLink</span>
        </Link>
        <nav className="nav-list" aria-label="Primary">
          {visibleNav.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>
        {userName ? (
          <div className="sidebar-user">
            <Avatar name={userName} />
            <div className="row-title">
              <strong>{userName}</strong>
              <span>{isAdmin ? "Administrator" : "Member"}</span>
            </div>
          </div>
        ) : null}
      </aside>
      <main className="main">{children}</main>
    </div>
  );
}