import { ThemeProvider, BaseStyles, Box } from "@primer/react";
import type { ReactNode } from "react";
import { useEffect } from "react";

interface AppProviderProps {
  children: ReactNode;
}

export function AppProvider({ children }: AppProviderProps) {
  useEffect(() => {
    // Set up theme data attributes for proper Primer theming
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const colorMode = prefersDark ? "dark" : "light";
    document.body.setAttribute("data-color-mode", colorMode);
    document.body.setAttribute("data-light-theme", "light");
    document.body.setAttribute("data-dark-theme", "dark");
  }, []);

  return (
    <ThemeProvider colorMode="auto">
      <BaseStyles>
        <Box p={3}>{children}</Box>
      </BaseStyles>
    </ThemeProvider>
  );
}