import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Stack } from "expo-router";

import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
import "@/global.css";
import { TodosProvider } from "@/store/todoProvider";
import { useEffect } from "react";
import mobileAds from "react-native-google-mobile-ads";

export default function App() {
  useEffect(() => {
    mobileAds()
      .initialize()
      .catch((e) => console.warn(e));
  }, []);

  return (
    <TodosProvider>
      <GluestackUIProvider mode="light">
        <StatusBar style="auto" />
        <SafeAreaView style={{ flex: 1 }}>
          <Stack screenOptions={{ header: () => null }} />
        </SafeAreaView>
      </GluestackUIProvider>
    </TodosProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    // alignItems: "center",
    // justifyContent: "center",
  },
});