"use client";

import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import { useTheme } from "@mui/material/styles";

export function ProgressReportPageContainer({ children }: { children: ReactNode }) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Box
      sx={{
        "--mr-text": isDark ? "#E5E7EB" : "#181D27",
        "--mr-muted": isDark ? "#CBD5E1" : "#717680",
        "--mr-border": isDark ? "#243244" : "#F5F5F5",
        "--mr-blue": isDark ? "#60A5FA" : "#1A64A8",

        minHeight: "calc(100dvh - 64px)",
        width: "100%",
        minWidth: 0,
        display: "flex",
        flexDirection: "column",
        px: { xs: 2, md: 2.5 },
        py: { xs: 2.5, md: 2 },
        color: "var(--mr-text)",
        bgcolor: "transparent",
      }}
    >
      {children}
    </Box>
  );
}