"use client";

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

export default function SideBar({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { navMain } = useNavigationData();

  return (
    <div className="grid min-h-[calc(100vh-56px)] grid-cols-1 lg:grid-cols-[260px_1fr]">
      <aside className="border-r border-sidebar-border bg-sidebar/95 p-4 text-sidebar-foreground backdrop-blur lg:sticky lg:top-14 lg:h-[calc(100vh-56px)] lg:overflow-y-auto">
        {navMain.map((group) => (
          <section key={group.title} className="mb-5 last:mb-0">
            <h2 className="mb-2 px-2 text-sm font-black tracking-tight text-sidebar-foreground">{group.title}</h2>
            <div className="grid gap-1.5">
              {group.items.map((item) => {
                const active = pathname === item.url || pathname.startsWith(`${item.url}/`);
                return (
                  <Link
                    key={item.url}
                    href={item.url}
                    className={cn(
                      "rounded-xl px-3 py-2.5 text-sm font-semibold text-sidebar-foreground/80 transition hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                      active && "bg-emerald-100 text-emerald-950 shadow-sm ring-1 ring-emerald-900/5 dark:bg-emerald-400/15 dark:text-emerald-50"
                    )}
                  >
                    {item.title}
                  </Link>
                );
              })}
            </div>
          </section>
        ))}
      </aside>
      <main className="min-w-0 p-4 md:p-5">{children}</main>
    </div>
  );
}
