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

/**
 * Account and contact detail pages.
 *
 * Wrapped in `PromoThemeShell` for the same reason the members list is: the
 * accent, `--promo-accent-*` and `--role-*` variables are published by the
 * shell, and these routes sit in their own layout rather than under
 * `members.layout`, so they would otherwise render with console defaults while
 * the list next door was themed.
 */
const MemberIdLayout = () => {
  return (
    <AppShellSection>
      <PromoThemeShell>
        <Box py={20}>
          <Outlet />
        </Box>
      </PromoThemeShell>
    </AppShellSection>
  );
};

export default MemberIdLayout;