import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import { Palette } from "../styles";
import { Routes } from "./Routes";

import Home from "../screens/Home";
import CreateSongs from "../screens/CreateSongs";

const screenOptions = {
  headerShown: false,
  cardOverlayEnabled: true,
  headerStyle: {
    backgroundColor: Palette.background,
  },
  headerTitleAlign: "center",
  headerBackTitleVisible: false,
};

const HomeStack = createStackNavigator();

export default function HomeStackScreen() {
  return (
    <HomeStack.Navigator
      initialRouteName={Routes.Home}
      screenOptions={[
        {
          contentStyle: {
            backgroundColor: Palette.white,
          },
        },
        screenOptions,
      ]}
    >
      <HomeStack.Screen
        name={Routes.Home}
        component={Home}
        options={{ headerShown: false }}
      />
  <HomeStack.Screen
        name={Routes.Create}
        component={CreateSongs}
        options={{ headerShown: false }}
      />
    </HomeStack.Navigator>
  );
}
