import {
  Box,
  CssBaseline,
  ExotelThemeProvider
} from "@exotel-npm-dev/signal-design-system";
import type { ReactNode } from "react";

/**
 * Wraps the app in the Exotel **Signal Design System** theme (light only).
 * `ExotelThemeProvider defaultMode="light"` matches `index.html` (`class="light"`,
 * `color-scheme: light`). Do not add a dark-mode toggle or switch to `dark`.
 * Use Signal-exported components only; `check-signal-imports.cjs` blocks direct
 * `@mui/material` imports under `app/`.
 */
export function AppTheme({ children }: { children: ReactNode }) {
  return (
    <ExotelThemeProvider defaultMode="light">
      <CssBaseline enableColorScheme />
      <Box
        className="gwt-custom-app-root"
        sx={{
          bgcolor: "background.default",
          color: "text.primary",
          minHeight: "100vh",
          boxSizing: "border-box",
          p: 2
        }}
      >
        {children}
      </Box>
    </ExotelThemeProvider>
  );
}