import { StatusBar } from "expo-status-bar";
import { View } from "react-native";
import { style } from "./src/util/style";

import { PostsContainer } from "./src/components/PostsContainer";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NewPostContainer } from "./src/components/NewPostContainer";

const Stack = createNativeStackNavigator();

export default function App(): JSX.Element {
  return (
    <>
      <StatusBar style="light" />
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={homeOptions}
          />
          <Stack.Screen name="New" component={PostScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

const homeOptions = {
  headerStyle: style.header,
  headerTitleStyle: style.headerTitle,
  headerTintColor: "#fff",
};

function HomeScreen(): JSX.Element {
  return (
    <View style={style.app}>
      <PostsContainer />
    </View>
  );
}

function PostScreen(): JSX.Element {
  return (
    <View style={style.app}>
      <NewPostContainer />
    </View>
  );
}