import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import { FEATURE_SLUGS, getCheckedAccess } from "@/lib/role-helpers";
import type { AccessScope } from "@/lib/features/types";
import type { Route } from "./+types/page";
import ContactCompletenessClientPage from "./_client";

export const handle = {
  breadcrumb: () => (
    <BreadCrumbLink
      links={[{ label: "Promo Codes" }, { label: "Contact Completeness" }]}
    />
  ),
};

/*
 * Fetched client-side: both the buckets and the member list refetch on every
 * filter change, so there is nothing stable to prefetch.
 */
export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.promoCodeCampaigns,
  "read",
  async ({ request }) => ({
    accessScope: getCheckedAccess(request, FEATURE_SLUGS.promoCodeCampaigns),
  }),
);

const Page: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { accessScope } = loaderData as unknown as { accessScope: AccessScope };
  return <ContactCompletenessClientPage accessScope={accessScope} />;
};

export default Page;