"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Icon } from "@/components/ui/Icon";

const TABS = [
  { href: "/admin", label: "Übersicht", icon: "dashboard", perm: "admin.access" },
  { href: "/admin/users", label: "Nutzerkonten", icon: "users", perm: "admin.users" },
  { href: "/admin/roles", label: "Rollen & Rechte", icon: "shield", perm: "admin.roles" },
  { href: "/admin/teams", label: "Teams", icon: "creators", perm: "admin.teams" },
  { href: "/admin/settings", label: "Einstellungen", icon: "settings", perm: "admin.settings" },
];

export function AdminTabs({ allowed }: { allowed: string[] }) {
  const path = usePathname();
  return (
    <div className="flex flex-wrap gap-2" data-reveal>
      {TABS.filter((t) => allowed.includes(t.perm) || t.perm === "admin.access").map((t) => (
        <Link key={t.href} href={t.href} className="pill" data-active={path === t.href}>
          <Icon name={t.icon} size={15} /> {t.label}
        </Link>
      ))}
    </div>
  );
}