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 PromoAccessRolesClientPage from "./_client";

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

/*
 * Gated on the same feature as the Access List: these roles grant promo-code and
 * export data access, so whoever may edit the Access List may manage them.
 */
export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.promocodeAccessList,
  "read",
  async ({ request }) => ({
    accessScope: getCheckedAccess(request, FEATURE_SLUGS.promocodeAccessList),
  }),
);

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

export default Page;