import { Box, Stack, type MantineSpacing } from "@mantine/core";
import type { ReactNode } from "react";

export interface PageContainerProps {
  children: ReactNode;
  /** Drop the max-width cap for full-bleed pages (boards, very wide tables). */
  fluid?: boolean;
  /** Vertical gap between the page's stacked sections. */
  gap?: MantineSpacing;
}

/**
 * Standard page shell: one consistent inset + a vertical Stack so every
 * dashboard page shares the same outer padding and inter-section rhythm.
 * The surrounding AppShell.Main already paints the page background, so this
 * never sets its own — pages stay on the shared `edr-bg` surface.
 */
export function PageContainer({ children, fluid = false, gap = "lg" }: PageContainerProps) {
  return (
    <Box px="lg" py="lg" mx="auto" w="100%" maw={fluid ? undefined : 1600}>
      <Stack gap={gap}>{children}</Stack>
    </Box>
  );
}

export default PageContainer;