import { Link } from "@tanstack/react-router";
import { Server, Settings, User } from "lucide-react";
import { userAccess } from "../../lib/authClient";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from "../ui/sidebar";
import type { Items } from "./SideBarNav";

export default function Admin() {
	const items: Items[] = [
		{
			title: "Users",
			url: "/lst/app/admin/users",
			icon: User,
			role: ["systemAdmin", "admin"],
			module: "admin",
			active: true,
		},
		{
			title: "System",
			url: "/lst/app/admin/settings",
			icon: Settings,
			role: ["systemAdmin", "admin"],
			module: "admin",
			active: true,
		},
		{
			title: "Modules",
			url: "/lst/app/admin/modules",
			icon: Settings,
			role: ["systemAdmin", "admin"],
			module: "admin",
			active: true,
		},
		{
			title: "Servers",
			url: "/lst/app/admin/servers",
			icon: Server,
			role: ["systemAdmin", "admin"],
			module: "admin",
			active: true,
		},
	];
	return (
		<SidebarGroup>
			<SidebarGroupLabel>Admin</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => (
						<SidebarMenuItem key={item.title}>
							<>
								{userAccess(item.module, item.role) && item.active && (
									<SidebarMenuButton asChild>
										<Link to={item.url}>
											<item.icon />
											<span>{item.title}</span>
										</Link>
									</SidebarMenuButton>
								)}
							</>
						</SidebarMenuItem>
					))}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}
