"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { ADMIN_NAV } from "@/components/admin/admin-sidebar"

export function AdminHeader() {
  const pathname = usePathname()
  const current = ADMIN_NAV.find((n) =>
    n.href === "/admin" ? pathname === "/admin" : pathname.startsWith(n.href)
  )

  return (
    <header className="shrink-0 border-b border-white/[0.06] bg-[#111118]/90 backdrop-blur-sm">
      <div className="flex h-16 items-center justify-between px-6">
        <h1 className="text-sm font-semibold text-white">{current?.label ?? "Admin"}</h1>
        <span className="rounded-full border border-rose-500/30 bg-rose-500/10 px-2.5 py-1 text-[10px] font-semibold tracking-wide text-rose-300">
          SUPERADMIN
        </span>
      </div>

      {/* Mobile nav (sidebar is hidden under md) */}
      <nav className="flex items-center gap-1 overflow-x-auto border-t border-white/[0.06] px-3 py-2 md:hidden">
        {ADMIN_NAV.map(({ label, href }) => {
          const active = href === "/admin" ? pathname === "/admin" : pathname.startsWith(href)
          return (
            <Link
              key={href}
              href={href}
              className={cn(
                "shrink-0 rounded-lg px-3 py-1.5 text-xs font-medium transition",
                active ? "bg-rose-600/15 text-rose-200" : "text-white/50 hover:text-white/90"
              )}
            >
              {label}
            </Link>
          )
        })}
      </nav>
    </header>
  )
}
