Artifacts

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { NAV } from "./nav";

function isActive(pathname: string, href: string): boolean {
  if (href === "/") return pathname === "/";
  return pathname === href || pathname.startsWith(href + "/");
}

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

  return (
    <aside className="hidden md:flex md:w-[248px] md:flex-col bg-sidebar text-sidebar-foreground border-r border-sidebar-border">
      <div className="flex h-16 items-center gap-3 px-5">
        <div className="flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-sm font-semibold tracking-tight">
          HQ
        </div>
        <div className="leading-tight">
          <div className="text-sm font-semibold tracking-tight">HQ01</div>
          <div className="text-[11px] text-sidebar-muted">AAF Holdings</div>
        </div>
      </div>

      <nav className="flex-1 overflow-y-auto px-3 py-2">
        {NAV.map((section) => (
          <div key={section.title} className="mb-5">
            <div className="px-3 pb-1.5 text-[10px] font-medium uppercase tracking-[0.12em] text-sidebar-muted">
              {section.title}
            </div>
            <ul className="space-y-0.5">
              {section.items.map((item) => {
                const active = isActive(pathname, item.href);
                const Icon = item.icon;
                return (
                  <li key={item.href}>
                    <Link
                      href={item.href}
                      className={cn(
                        "group flex items-center gap-3 rounded-md px-3 py-2 text-[13px] font-medium transition-colors",
                        active
                          ? "bg-white/10 text-white"
                          : "text-sidebar-muted hover:bg-white/5 hover:text-sidebar-foreground",
                      )}
                    >
                      <Icon
                        className={cn(
                          "h-4 w-4 shrink-0 transition-colors",
                          active
                            ? "text-sidebar-accent"
                            : "text-sidebar-muted group-hover:text-sidebar-foreground",
                        )}
                        strokeWidth={2}
                      />
                      {item.label}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </nav>

      <div className="border-t border-sidebar-border px-5 py-4">
        <div className="text-[11px] leading-relaxed text-sidebar-muted">
          Intelligence belongs to the organization, not the worker.
        </div>
      </div>
    </aside>
  );
}