import "../global.css";
import { Stack } from "expo-router";
import { ConnectionProvider } from "../contexts/ConnectionContext";
import { ChatProvider } from "../contexts/ChatContext";
import { ThemeProvider, useTheme } from "../contexts/ThemeContext";
import { StatusBar } from "expo-status-bar";

function InnerLayout() {
  const { isDark, colors } = useTheme();
  return (
    <>
      <StatusBar style={isDark ? "light" : "dark"} backgroundColor={colors.bg} />
      <Stack
        screenOptions={{
          headerShown: false,
          contentStyle: { backgroundColor: colors.bg },
          animation: "slide_from_right",
        }}
      />
    </>
  );
}

export default function RootLayout() {
  return (
    <ThemeProvider>
      <ConnectionProvider>
        <ChatProvider>
          <InnerLayout />
        </ChatProvider>
      </ConnectionProvider>
    </ThemeProvider>
  );
}