"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Code2, Users, User } from "lucide-react";
import { cn } from "@/lib/utils";

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

  const navItems = [
    {
      href: "/admin/manage/skills",
      label: "Gestion des Skills",
      icon: Code2,
      value: "skills",
    },
    {
      href: "/admin/manage/teams",
      label: "Gestion des Teams",
      icon: Users,
      value: "teams",
    },
    {
      href: "/admin/manage/users",
      label: "Gestion des Utilisateurs",
      icon: User,
      value: "users",
    },
  ];

  return (
    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1 mb-6 w-fit mx-auto">
      <div className="grid grid-cols-3 bg-transparent border-0 gap-1">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = pathname === item.href;

          return (
            <Link
              key={item.value}
              href={item.href}
              className={cn(
                "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
                isActive
                  ? "bg-white/20 text-white"
                  : "text-slate-400 hover:text-white hover:bg-white/10"
              )}
            >
              <Icon className="w-4 h-4 mr-2" />
              {item.label}
            </Link>
          );
        })}
      </div>
    </div>
  );
}