import { StatusBar } from "expo-status-bar";
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";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";

type RootStackParamList = {
  Home: undefined;
  New: undefined;
};

export type HomeScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  "Home"
  >;

const Stack = createNativeStackNavigator();

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

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