"use client"

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

const tabs = [
  { label: "Ubicaciones", href: "/admin/locations" },
  { label: "Tipos de recursos", href: "/admin/resource-types" },
  { label: "Recursos", href: "/admin/resources" },
]

export function AdminTabs() {
  const pathname = usePathname()

  return (
    <div className="border-b border-[var(--ds-neutral-200)]">
      <nav className="flex gap-[var(--ds-space-3x)]">
        {tabs.map((tab) => {
          const isActive =
            pathname === tab.href || pathname.startsWith(tab.href + "/")

          return (
            <Link
              key={tab.href}
              href={tab.href}
              className={cn(
                "relative pb-3 ds-type-global-xs transition-colors",
                isActive
                  ? "ds-type-semibold text-[var(--ds-text-neutral-default)]"
                  : "text-[var(--ds-text-neutral-lighter)] hover:text-[var(--ds-text-neutral-default)]",
              )}
            >
              {tab.label}
              {isActive && (
                <span className="absolute inset-x-0 bottom-0 h-[2px] rounded-full bg-[var(--ds-brand-400)]" />
              )}
            </Link>
          )
        })}
      </nav>
    </div>
  )
}
