import { StatusBar } from 'expo-status-bar';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

import Home from "./modules/Home";
import Main from "./modules/Main";
import Map from "./modules/Map";

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="home" component={Home} options={{ headerShown: false }} />
        <Stack.Screen name="main" component={Main} options={{
          title: 'Save position',
          headerStyle: {
            backgroundColor: '#3D54BB',
          },
          headerTintColor: '#ffffff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }} />
        <Stack.Screen name="mapV" component={Map} options={{
          title: 'Location on map',
          headerStyle: {
            backgroundColor: '#3D54BB',
          },
          headerTintColor: '#ffffff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }} />
        {/* <Stack.Screen name="camera" component={Camera} options={{ */}
        {/*   title: 'Camera', */}
        {/*   headerStyle: { */}
        {/*     backgroundColor: '#EB1F63', */}
        {/*   }, */}
        {/*   headerTintColor: '#ffffff', */}
        {/*   headerTitleStyle: { */}
        {/*     fontWeight: 'bold', */}
        {/*   }, */}
        {/* }} /> */}
        {/* <Stack.Screen name="settings" component={Setting} options={{ */}
        {/*   title: 'Settings', */}
        {/*   headerStyle: { */}
        {/*     backgroundColor: '#EB1F63', */}
        {/*   }, */}
        {/*   headerTintColor: '#ffffff', */}
        {/*   headerTitleStyle: { */}
        {/*     fontWeight: 'bold', */}
        {/*   }, */}
        {/* }} /> */}
      </Stack.Navigator>
      <StatusBar style="auto" />
    </NavigationContainer>
  );
}

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