import { Link } from "@tanstack/react-router";
import type { LucideIcon } from "lucide-react";
import { type UserRoles, userAccess } from "@/lib/authClient";
import {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarMenuItem,
	SidebarTrigger,
} from "../ui/sidebar";
import Admin from "./Admin";
import ForkliftSideBar from "./ForkliftSideBar";
import { Header } from "./Header";

export type Items = {
	title: string;
	url: string;
	icon: LucideIcon;
	role: UserRoles["role"][];
	module: string;
	active: boolean;
};

export default function SideBarNav() {
	return (
		<div className="flex min-h-screen">
			<Sidebar collapsible="icon">
				<Header />
				<SidebarContent>
					{userAccess(null, [
						"systemAdmin",
						"admin",
						"manager",
						"supervisor",
					]) && <ForkliftSideBar />}
					{userAccess(null, ["systemAdmin", "admin"]) && <Admin />}
				</SidebarContent>
				<SidebarFooter>
					<SidebarMenuItem>
						<Link to={"/changelog"}>Changelog</Link>
					</SidebarMenuItem>
					<SidebarTrigger />
				</SidebarFooter>
			</Sidebar>
		</div>
	);
}
