"use client";

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

export function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();

  return (
    <nav className="flex h-full flex-col gap-1 overflow-y-auto p-4">
      <div className="mb-4 flex items-center gap-2 px-2">
        <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary-soft text-xl">
          🧘
        </span>
        <span className="font-bold text-foreground">مدیریت مدیتیشن</span>
      </div>

      {NAV.map((section) => {
        const Icon = section.icon;
        return (
          <div key={section.label} className="mb-1">
            <div className="flex items-center gap-2 px-3 py-1.5 text-xs font-semibold text-muted">
              <Icon className="h-4 w-4" />
              {section.label}
            </div>
            <div className="flex flex-col">
              {section.items.map((item) => {
                const active =
                  pathname === item.href ||
                  (item.href !== "/dashboard" &&
                    pathname?.startsWith(item.href));
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    onClick={onNavigate}
                    className={cn(
                      "mr-6 rounded-lg px-3 py-2 text-sm transition",
                      active
                        ? "bg-primary text-white"
                        : "text-foreground hover:bg-surface-muted",
                    )}
                  >
                    {item.label}
                  </Link>
                );
              })}
            </div>
          </div>
        );
      })}
    </nav>
  );
}
