"use client";

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

const TABS = [
  { href: "/atelier-novelia/parametres", label: "Profil", end: true },
  { href: "/atelier-novelia/parametres/equipe", label: "Équipe agence" },
  { href: "/atelier-novelia/parametres/integrations", label: "Intégrations" },
  { href: "/atelier-novelia/parametres/facturation", label: "Facturation" },
];

export function AdminSettingsTabs() {
  const pathname = usePathname();
  return (
    <nav className="flex items-center gap-1 border-b border-border -mt-2 overflow-x-auto">
      {TABS.map((tab) => {
        const active = tab.end ? pathname === tab.href : pathname.startsWith(tab.href);
        return (
          <Link
            key={tab.href}
            href={tab.href}
            className={cn(
              "px-4 py-2.5 text-sm font-medium transition-colors relative whitespace-nowrap",
              active ? "text-text" : "text-text-dim hover:text-text-muted",
            )}
          >
            {tab.label}
            {active && (
              <span className="absolute left-0 right-0 -bottom-px h-0.5 bg-accent rounded-full" />
            )}
          </Link>
        );
      })}
    </nav>
  );
}