"use client";

import Link from "next/link";

import { cn } from "@/lib/utils";

export type BankSetupTab = "link-accounts" | "parent-banks";

type BankSetupTabsProps = {
  tenant: string;
  active: BankSetupTab;
};

const TABS: Array<{ id: BankSetupTab; label: string; href: (tenant: string) => string }> = [
  {
    id: "link-accounts",
    label: "Link Accounts",
    href: (tenant) => `/customer/${tenant}/admin/link-bank-accounts`,
  },
  {
    id: "parent-banks",
    label: "Parent Banks",
    href: (tenant) => `/customer/${tenant}/admin/parent-banks`,
  },
];

export function BankSetupTabs({ tenant, active }: BankSetupTabsProps) {
  return (
    <nav className="inline-flex" aria-label="Bank setup">
      <ul
        className="flex list-none flex-row items-stretch gap-1 rounded-lg border bg-muted/60 p-1"
        role="tablist"
      >
        {TABS.map((tab) => {
          const isActive = tab.id === active;
          return (
            <li key={tab.id} role="presentation">
              <Link
                href={tab.href(tenant)}
                role="tab"
                aria-selected={isActive}
                className={cn(
                  "inline-flex items-center justify-center rounded-md px-3.5 py-2 text-sm font-medium whitespace-nowrap transition-colors",
                  isActive
                    ? "bg-background text-foreground shadow-sm"
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
                {tab.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}