import { Link, Outlet, useLocation } from "@remix-run/react";
import { cn } from "~/lib/utils";
import { AdminPageTitle } from "~/components/admin/DataTable";

const TABS = [
  { label: "نمای کلی", to: "/admin/ledger", exact: true },
  { label: "برداشت‌ها", to: "/admin/ledger/payouts" },
  { label: "تراکنش‌ها", to: "/admin/ledger/transactions" },
  { label: "دفتر روزنامه", to: "/admin/ledger/journal" },
  { label: "فروشندگان", to: "/admin/ledger/sellers" },
];

export default function LedgerLayout() {
  const loc = useLocation();
  const active = (t: (typeof TABS)[number]) =>
    t.exact ? loc.pathname === t.to : loc.pathname.startsWith(t.to);

  return (
    <div>
      <AdminPageTitle>دفتر مالی</AdminPageTitle>
      <div className="flex gap-1 mb-5 border-b border-WHITE3 overflow-x-auto hide-scrollbar">
        {TABS.map((t) => (
          <Link
            key={t.to}
            to={t.to}
            prefetch="intent"
            className={cn(
              "px-4 py-2 text-[13.5px] font-semibold whitespace-nowrap border-b-2 -mb-px transition-colors",
              active(t)
                ? "border-BLACK text-BLACK"
                : "border-transparent text-GRAY hover:text-BLACK2"
            )}
          >
            {t.label}
          </Link>
        ))}
      </div>
      <Outlet />
    </div>
  );
}