import {
	Sidebar,
	SidebarContent,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuItem,
} from "@/components/ui/sidebar";
import { useSession } from "@/lib/auth-client";
import AdminSidebar from "./AdminBar";
import DocBar from "./DocBar";

export function AppSidebar() {
	const { data: session } = useSession();

	return (
		<Sidebar
			variant="sidebar"
			collapsible="offcanvas"
			className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
		>
			<SidebarHeader>
				<SidebarMenu>
					<SidebarMenuItem>
						<SidebarContent>
							<DocBar/>
							{session &&
								(session.user.role === "admin" ||
									session.user.role === "systemAdmin") && (
									<AdminSidebar session={session} />
								)}
						</SidebarContent>
					</SidebarMenuItem>
				</SidebarMenu>
			</SidebarHeader>
		</Sidebar>
	);
}