"use client";

import { useTranslations } from "next-intl";

import { Link, usePathname } from "@/i18n/navigation";
import { cn } from "@/lib/utils";

type Tab = {
  key: "profile" | "organization" | "team" | "billing";
  href: "/settings/profile" | "/settings/organization" | "/settings/team" | "/settings/billing";
};

const TABS: readonly Tab[] = [
  { key: "profile", href: "/settings/profile" },
  { key: "organization", href: "/settings/organization" },
  { key: "team", href: "/settings/team" },
  { key: "billing", href: "/settings/billing" },
];

export function SettingsTabs() {
  const t = useTranslations("Settings.tabs");
  const pathname = usePathname();

  return (
    <nav className="flex gap-2 border-b">
      {TABS.map((tab) => {
        const active = pathname.endsWith(tab.href);
        const className = cn(
          "-mb-px border-b-2 px-3 py-2 text-sm font-medium",
          active
            ? "border-primary text-primary"
            : "border-transparent text-muted-foreground hover:text-foreground",
        );
        return (
          <Link key={tab.key} href={tab.href} className={className}>
            {t(tab.key)}
          </Link>
        );
      })}
    </nav>
  );
}