import { FrontendBrandLogo } from "@/components/frontend/brand-logo";
import { AdminSidebarNav } from "./admin-sidebar-nav";

export function AdminSidebarServer() {
  return (
    <aside
      className="fixed left-0 top-0 z-40 hidden md:flex h-screen w-64 flex-col bg-card border-r border-border/40 shadow-lg"
      aria-label="Admin navigation"
    >
      {/* Logo header */}
      <div className="flex items-center gap-3 border-b border-border/40 px-4 py-4 bg-gradient-to-br from-primary/5 to-transparent shrink-0">
        <FrontendBrandLogo
          variant="compact"
          href="/admin/dashboard"
          roleBadge="admin"
          className="gap-3"
        />
      </div>

      {/* Navigation - client component for interactive state */}
      <div className="flex-1 overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent hover:scrollbar-thumb-border/80">
        <AdminSidebarNav />
      </div>

      <div className="border-t border-border/40 bg-muted/50 p-3 shrink-0">
        <p className="text-xs text-muted-foreground text-center font-medium">
          ameera holidays admin v1.0
        </p>
      </div>
    </aside>
  );
}