"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ArrowBigLeft, LayoutDashboard, Package, ShoppingCart, RotateCcw, FolderTree, Users, Touchpad } from "lucide-react";

export default function Sidebar() {
	const pathname = usePathname();

	const navItems = [
		{
			name: "Dashboard",
			href: "/admin",
			icon: LayoutDashboard,
		},
		{
			name: "Produse",
			href: "/admin/produse",
			icon: Package,
		},
		{
			name: "Categorii",
			href: "/admin/categorii",
			icon: FolderTree,
		},
		{
			name: "Comenzi",
			href: "/admin/comenzi",
			icon: ShoppingCart,
		},
		{
			name: "Retururi",
			href: "/admin/retururi",
			icon: RotateCcw,
		},
		{
			name: "Utilizatori",
			href: "/admin/utilizatori",
			icon: Users,
		},
          {
			name: "Banere",
			href: "/admin/banere",
			icon: Touchpad,
		},
          {
               name: "Inapoi in site", 
               href: "/",
               icon: ArrowBigLeft
          }
	];

	return (
		<aside className='sidebar'>
			<div className='sidebar-header'>
				<Link href='/admin' className='sidebar-logo'>
					<LayoutDashboard size={28} />
					<span>Admin Panel</span>
				</Link>
			</div>

			<nav className='sidebar-nav'>
				{navItems.map((item) => {
					const Icon = item.icon;
					const isActive = pathname === item.href || pathname.startsWith(item.href + "/");

					return (
						<div key={item.href} className='nav-item'>
							<Link href={item.href} className={`nav-link ${isActive ? "active" : ""}`}>
								<Icon size={20} />
								<span>{item.name}</span>
							</Link>
						</div>
					);
				})}
			</nav>
		</aside>
	);
}
