import { createFileRoute } from "@tanstack/react-router";
import { z } from "zod";
import { getBilling } from "~/fns/billing";
import { BillingPage } from "~/components/billing/BillingPage";

export const Route = createFileRoute("/settings/billing")({
  validateSearch: z.object({ period: z.string().optional() }),
  loaderDeps: ({ search }) => ({ period: search.period }),
  loader: ({ deps }) => getBilling({ data: { org: null, period: deps.period } }),
  component: UserBillingPage,
});

function UserBillingPage() {
  return <BillingPage billing={Route.useLoaderData()} org={null} />;
}