"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import type { DashboardNavItem } from "./dashboard-nav";

interface DashboardSidebarProps {
  items: DashboardNavItem[];
}

export default function DashboardSidebar({ items }: DashboardSidebarProps) {
  const pathname = usePathname();

  return (
    <aside
      data-testid="dashboard-sidebar"
      className="hidden md:flex fixed inset-y-0 left-0 z-40 flex-col bg-sidebar-bg w-[72px] xl:w-[220px]"
      aria-label="Dashboard navigation"
    >
      <div className="flex h-16 shrink-0 items-center justify-center xl:justify-start xl:px-5 border-b border-white/10">
        <Link
          href="/farmers/dashboard"
          className="flex items-center justify-center rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-deep focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar-bg"
          aria-label="AGNET Global home"
        >
          <img
            src="/agnet-global-logo.png"
            alt=""
            className="h-8 w-8 xl:h-8 xl:w-auto object-contain"
          />
        </Link>
      </div>

      <nav
        data-testid="dashboard-nav"
        className="flex flex-1 flex-col gap-1 p-2 xl:p-3"
        aria-label="Module navigation"
      >
        {items.map((item) => {
          const isActive = pathname === item.href;
          const Icon = item.icon;

          return (
            <Link
              key={item.id}
              href={item.href}
              data-testid={`dashboard-nav-${item.id}`}
              aria-current={isActive ? "page" : undefined}
              title={item.label}
              className={cn(
                "flex min-h-11 items-center gap-3 rounded-xl px-3 py-2.5 font-inter text-sm font-medium transition-colors duration-200",
                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-deep focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar-bg",
                isActive
                  ? "bg-white/15 text-white shadow-sm"
                  : "text-white/70 hover:bg-sidebar-bg-deep hover:text-white",
              )}
            >
              <Icon className="size-5 shrink-0" aria-hidden="true" />
              <span className="hidden xl:inline truncate">{item.label}</span>
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}