"use client";

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

export type NavItem = { href: string; label: string; icon?: ReactNode };

export function SidebarNav({ items }: { items: NavItem[] }) {
  const pathname = usePathname();

  return (
    <nav className="flex-1 space-y-0.5 px-3 py-4">
      {items.map((item) => {
        const active =
          pathname === item.href || pathname.startsWith(`${item.href}/`);
        return (
          <Link
            key={item.href}
            href={item.href}
            aria-current={active ? "page" : undefined}
            className={[
              "group relative flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
              active
                ? "bg-sidebar-active text-sidebar-foreground"
                : "text-sidebar-muted hover:bg-sidebar-active/60 hover:text-sidebar-foreground",
            ].join(" ")}
          >
            {active && (
              <span
                aria-hidden="true"
                className="absolute left-0 top-1/2 h-5 -translate-y-1/2 w-0.5 rounded-r bg-sidebar-accent"
              />
            )}
            {item.icon && (
              <span
                className={[
                  "shrink-0 transition-colors",
                  active
                    ? "text-sidebar-accent"
                    : "text-sidebar-muted group-hover:text-sidebar-foreground",
                ].join(" ")}
              >
                {item.icon}
              </span>
            )}
            <span className="truncate">{item.label}</span>
          </Link>
        );
      })}
    </nav>
  );
}