import { getServerSession } from "next-auth";
import Link from "next/link";
import { authOptions } from "@/lib/auth";
import { getVisibleNavItems } from "@/components/layout/navigation";
import { cn } from "@/lib/utils";

export async function Sidebar() {
  const session = await getServerSession(authOptions);
  const visibleNavItems = getVisibleNavItems(session?.user?.role);

  return (
    <aside className="hidden h-screen w-72 shrink-0 border-r border-border bg-background lg:sticky lg:top-0 lg:flex lg:flex-col">
      <div className="shrink-0 border-b border-border bg-background px-6 py-5">
        <p className="text-sm font-medium text-muted-foreground">Sistema territorial</p>
        <h1 className="mt-1 text-xl font-semibold text-foreground">Empadronamiento VFB</h1>
      </div>
      <nav className="min-h-0 flex-1 space-y-1 overflow-y-auto px-4 py-4">
        {visibleNavItems.map((item) => {
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground",
              )}
            >
              <Icon className="h-4 w-4" aria-hidden="true" />
              {item.label}
            </Link>
          );
        })}
      </nav>
      <div className="shrink-0 border-t border-border bg-background px-6 py-4">
        <div className="text-xs leading-5 text-muted-foreground">
          <p>Desarrollado por</p>
          <p className="font-medium text-foreground">Claudio Briones Ogalde</p>
        </div>
      </div>
    </aside>
  );
}