import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Provider } from 'react-redux';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import store from "./store";
// import { Counter } from './screens/Counter'
import { LogIn } from './screens/LogIn';
import { Counter } from './screens/Counter';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


const A = () => <View><Text>Home</Text></View>
const B = () => <View><Text>Settings</Text></View>
const C = () => <View><Text>C</Text></View>

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

const Home = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="A" component={A} />
      <Tab.Screen name="B" component={B} />
    </Tab.Navigator>
  )
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* <Stack.Screen name='Counter' component={Counter} /> */}
        <Stack.Screen name="Login" component={LogIn} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Profile" component={C} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const AppWrapper = () => {
  return (
    <Provider store={store}>
      <SafeAreaProvider>
        <App />
      </SafeAreaProvider>
    </Provider>
  );
};


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