"use client";

import { cn } from "@/utils/styles";
import { FileIcon, HeartIcon, LayoutDashboardIcon, PrinterIcon, UsersIcon, WrenchIcon } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

interface AdminSite {
	name: string;
	path: string;
	icon: React.ReactNode;
}

export function AdminSidebar() {
	const pathname = usePathname();
	const adminSites: AdminSite[] = [
		{
			name: "Dashboard",
			path: "/admin",
			icon: <LayoutDashboardIcon className="w-4 h-4" />,
		},
		{
			name: "Benutzer",
			path: "/admin/users",
			icon: <UsersIcon className="w-4 h-4" />,
		},
		{
			name: "Drucker",
			path: "/admin/printers",
			icon: <PrinterIcon className="w-4 h-4" />,
		},
		{
			name: "Druckaufträge",
			path: "/admin/jobs",
			icon: <FileIcon className="w-4 h-4" />,
		},
		{
			name: "Einstellungen",
			path: "/admin/settings",
			icon: <WrenchIcon className="w-4 h-4" />,
		},
		{
			name: "Über MYP",
			path: "/admin/about",
			icon: <HeartIcon className="w-4 h-4" />,
		},
	];

	return (
		<ul className="w-full">
			{adminSites.map((site) => (
				<li key={site.path}>
					<Link
						href={site.path}
						className={cn("flex items-center gap-2 p-2 rounded hover:bg-muted", {
							"font-semibold": pathname === site.path,
						})}
					>
						{site.icon}
						<span>{site.name}</span>
					</Link>
				</li>
			))}
		</ul>
	);
}
