"use client";

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

const adminSections = [
  { id: "preferences", label: "Préférences UI", path: "/admin/preferences" },
  { id: "users", label: "Utilisateurs", path: "/admin/users" },
  { id: "events", label: "Événements", path: "/admin/events" },
  { id: "feedbacks", label: "Feedbacks", path: "/admin/feedbacks" },
  { id: "challenges", label: "Défis", path: "/admin/challenges" },
  { id: "houses", label: "Maisons", path: "/admin/houses" },
];

export default function AdminNavigation() {
  const pathname = usePathname();

  return (
    <div className="flex gap-4 mb-8 justify-center flex-wrap">
      {adminSections.map((section) => {
        const isActive = pathname === section.path || 
          (section.path === "/admin/preferences" && pathname === "/admin");
        
        return (
          <Button
            key={section.id}
            as={Link}
            href={section.path}
            variant={isActive ? "primary" : "secondary"}
            size="md"
            className={isActive ? "bg-pixel-gold/10" : ""}
          >
            {section.label}
          </Button>
        );
      })}
    </div>
  );
}