import { Link, useLocation } from "react-router-dom";

/**
 * Only one top-level nav slot is allocated for Billing ("Faturamento" →
 * /billing/subscriptions, per AuthenticatedLayout.tsx) but the module has
 * three screens (Assinaturas, Fechamentos, Faturas) — same problem CRM
 * solved with `CrmSubNav` (src/routes/crm/CrmSubNav.tsx), replicated here:
 * an in-page toggle instead of three top-level nav entries.
 */
const TABS = [
  { key: "subscriptions", label: "Assinaturas", href: "/billing/subscriptions" },
  { key: "runs", label: "Fechamentos", href: "/billing/runs" },
  { key: "invoices", label: "Faturas", href: "/billing/invoices" },
] as const;

export function BillingSubNav() {
  const location = useLocation();

  return (
    <div className="mb-4 inline-flex rounded-md border border-border-color bg-white p-1">
      {TABS.map((tab) => {
        const active = location.pathname.startsWith(tab.href);
        return (
          <Link
            key={tab.key}
            to={tab.href}
            className={`rounded px-3 py-1.5 text-sm font-semibold ${
              active ? "bg-dark text-white" : "text-default hover:bg-light"
            }`}
          >
            {tab.label}
          </Link>
        );
      })}
    </div>
  );
}