acmcc/src/pages/accounting/AccountingSettingsLayout.tsx

import { NavLink, Outlet } from "react-router-dom";

const TABS = [
  { to: "", label: "General", end: true },
  { to: "check-setup", label: "Check Setup", end: false },
  { to: "integrations", label: "Integrations", end: false },
];

export default function AccountingSettingsLayout() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold">Settings</h1>
        <p className="text-sm text-muted-foreground">Manage your association profile, check printing, and integrations.</p>
      </div>
      <div className="flex gap-1 border-b border-border">
        {TABS.map((t) => (
          <NavLink
            key={t.to}
            to={t.to}
            end={t.end}
            className={({ isActive }) =>
              `px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
                isActive ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"
              }`
            }
          >
            {t.label}
          </NavLink>
        ))}
      </div>
      <Outlet />
    </div>
  );
}