import "react-native-gesture-handler";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import TabBar from "./tab-bar";
import { ThemeProvider } from "styled-components";
import Box from "../Sayfalar/Ekranlar/box";
import SearchEkrani from "./Ekranlar/search";
import HistoryEkrani from "./Ekranlar/history";
import FavoriteEkrani from "./Ekranlar/favorite";
import DetailEkrani from "./Ekranlar/detail";
import { SafeAreaView } from "react-native";
import theme from "./Ekranlar/tema";
const HomeStack = createStackNavigator();
const Tab = createBottomTabNavigator();

function SearchStack() {
  return (
    <HomeStack.Navigator headerMode="none">
      <HomeStack.Screen name="Search" component={SearchEkrani} />
      <HomeStack.Screen name="Detail" component={DetailEkrani} />
    </HomeStack.Navigator>
  );
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName="Search"
          tabBar={(props) => <TabBar {...props} />}
        >
          <Tab.Screen name="History" component={HistoryEkrani} />
          <Tab.Screen
            name="Search"
            component={SearchStack}
            options={{ headerShown: false }}
          />
          <Tab.Screen name="Favorite" component={FavoriteEkrani} />
        </Tab.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  );
}
export default App;