"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

const navItems = [
  { href: "/", label: "Dashboard" },
  { href: "/parts", label: "Parts" },
  { href: "/assemblies", label: "Assemblies" },
  { href: "/sales-orders", label: "Sales Orders" },
  { href: "/purchase-orders", label: "Purchase Orders" },
  { href: "/invoices", label: "Invoices" },
  { href: "/vendor-bills", label: "Vendor Bills" },
  { href: "/customers", label: "Customers" },
  { href: "/vendors", label: "Vendors" },
  { href: "/accounting", label: "Accounting" }
];

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

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark" />
        <strong>Inven</strong>
        <span className="muted">Inventory, kits, orders, and accounting in one container.</span>
      </div>
      <nav className="nav">
        {navItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            data-active={pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))}
          >
            {item.label}
          </Link>
        ))}
      </nav>
    </aside>
  );
}