"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { helpNavItems } from "./help-nav-data";

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

  return (
    <nav className="flex flex-col gap-1">
      {helpNavItems.map((item) => {
        const isActive = pathname === item.href;
        return (
          <Link
            key={item.href}
            href={item.href}
            className={`flex items-center gap-2.5 rounded-xl px-3.5 py-2.5 text-sm font-medium transition-all duration-200 ${
              isActive
                ? "bg-[#6B8F71]/10 text-[#6B8F71] shadow-sm"
                : "text-[#8A8F87] hover:bg-[#F2EFE9] hover:text-[#2D3436]"
            }`}
          >
            <item.icon
              className={`size-4 ${isActive ? "text-[#6B8F71]" : "text-[#8A8F87]"}`}
            />
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}
