"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Activity, Building2, ScrollText } from "lucide-react";

import { cn } from "@/lib/utils";

const items = [
  {
    href: "/admin",
    label: "Kitas",
    icon: Building2,
    exact: true,
  },
  {
    href: "/admin/audit",
    label: "AuditLog",
    icon: ScrollText,
    exact: false,
  },
];

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

  return (
    <nav className="flex flex-col gap-1 px-3">
      {items.map(({ href, label, icon: Icon, exact }) => {
        const isActive = exact ? pathname === href : pathname.startsWith(href);
        return (
          <Link
            key={href}
            href={href}
            className={cn(
              "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
              isActive
                ? "bg-primary text-primary-foreground"
                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
            )}
          >
            <Icon className="h-4 w-4 shrink-0" />
            {label}
          </Link>
        );
      })}

      <div className="mt-3 border-t px-3 pt-3 text-xs font-medium uppercase tracking-wide text-muted-foreground">
        Diagnose
      </div>
      <div className="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground">
        <Activity className="h-4 w-4 shrink-0" />
        Read-only Support
      </div>
    </nav>
  );
}