"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { SlidersHorizontal, CreditCard, Bell, ListChecks, Plug, Palette } from "lucide-react";
import { cn } from "./cn";

const TABS = [
  { href: "/admin/settings", label: "General", icon: SlidersHorizontal, exact: true },
  { href: "/admin/settings/payments", label: "Payments", icon: CreditCard },
  { href: "/admin/settings/notifications", label: "Notifications", icon: Bell },
  { href: "/admin/settings/signup-fields", label: "Signup fields", icon: ListChecks },
  { href: "/admin/settings/integrations", label: "Integrations", icon: Plug },
  { href: "/admin/settings/branding", label: "Branding", icon: Palette },
];

export function SettingsTabs() {
  const pathname = usePathname();
  const active = (href: string, exact?: boolean) => (exact ? pathname === href : pathname === href || pathname.startsWith(href + "/"));

  return (
    <div className="mb-6 -mx-1 overflow-x-auto">
      <nav className="flex min-w-max gap-1 border-b border-gray-200 px-1">
        {TABS.map(({ href, label, icon: Icon, exact }) => {
          const on = active(href, exact);
          return (
            <Link
              key={href}
              href={href}
              className={cn(
                "flex items-center gap-2 whitespace-nowrap border-b-2 px-3 py-2.5 text-sm font-medium transition-colors",
                on ? "border-[var(--brand)] text-[var(--brand)]" : "border-transparent text-gray-500 hover:text-gray-800",
              )}
            >
              <Icon className="h-4 w-4" />
              {label}
            </Link>
          );
        })}
      </nav>
    </div>
  );
}