import { AppShellSection, Box } from "@mantine/core";
import { Outlet } from "react-router";
import { PromoThemeShell } from "@/routes/promo-code-campaigns/_components/PromoThemeShell";

/**
 * Members shares the promo appearance theme, so the accent the user picks
 * drives Mantine's primary colour (tab pills, buttons, light badges) and the
 * `--promo-accent-*` / `--role-*` variables the tables read. Wrapping the
 * layout covers every inner page — list, account detail, contact detail.
 */
const MembersLayout = () => {
  return (
    <AppShellSection>
      <PromoThemeShell>
        <Box py={20} px={28}>
          <Outlet />
        </Box>
      </PromoThemeShell>
    </AppShellSection>
  );
};

export default MembersLayout;