import { AdminNav } from "@/components/admin/admin-nav";
import { LogoutButton } from "@/components/layout/logout-button";

export function AdminShell({
  children,
  userName,
  questionsBadge = 0,
}: {
  children: React.ReactNode;
  userName: string;
  questionsBadge?: number;
}) {
  return (
    <div className="min-h-screen flex">
      <aside
        className="w-52 flex flex-col shrink-0 fixed h-full z-10"
        style={{ backgroundColor: "var(--sidebar-bg)", color: "var(--sidebar-text)" }}
      >
        <div className="px-5 py-5" style={{ borderBottom: "2px solid var(--sidebar-border)" }}>
          <p className="font-bold text-base tracking-wide" style={{ color: "#E8F0D8" }}>
            Second Brain
          </p>
          <p className="text-xs mt-0.5 uppercase tracking-widest" style={{ color: "var(--sidebar-text)", fontSize: "0.6rem" }}>
            Администратор
          </p>
        </div>
        <nav className="flex-1 px-2 py-4 space-y-0.5 overflow-y-auto">
          <AdminNav questionsBadge={questionsBadge} />
        </nav>
        <div className="px-4 py-4" style={{ borderTop: "2px solid var(--sidebar-border)" }}>
          <p className="text-xs mb-3 truncate" style={{ color: "var(--sidebar-text)" }}>
            {userName}
          </p>
          <LogoutButton />
        </div>
      </aside>
      <div className="ml-52 flex-1 min-h-screen" style={{ backgroundColor: "var(--background)" }}>
        {children}
      </div>
    </div>
  );
}