import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
import '@/global.css';
import { SafeAreaView } from 'react-native-safe-area-context';
import { CounterProvider } from './states/ConterProvider';
import IndexPage from './screens/IndexPage';

export default function App() {
  return (
    <CounterProvider>
      <GluestackUIProvider mode="light">
        <SafeAreaView style={{ flex: 1 }} className="m-2">
          <StatusBar style="auto" />
          <IndexPage />
        </SafeAreaView>
      </GluestackUIProvider>
    </CounterProvider>
  );
}

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