"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Package, PlusCircle, Scan, FileDown, Printer } from "lucide-react";

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

  const navItems = [
    { href: "/", label: "Dashboard", icon: <Package size={20} /> },
    { href: "/add", label: "Add / Import", icon: <PlusCircle size={20} /> },
    { href: "/scan", label: "Scan QR", icon: <Scan size={20} /> },
    { href: "/print", label: "Print Labels", icon: <Printer size={20} /> },
  ];

  return (
    <nav className="navbar glass">
      <div className="nav-brand">Simpson's Fence Inventory</div>
      <ul className="nav-links">
        {navItems.map((item) => (
          <li key={item.href}>
            <Link
              href={item.href}
              className={`nav-link ${pathname === item.href ? 'active' : ''}`}
            >
              {item.icon}
              <span>{item.label}</span>
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}