import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";

// Import the screens to be used in the navigator
import Denuncias from "./screens/Denuncias";
import Derechos from "./screens/Derechos";
import Analisis from "./screens/Analisis";
import Formulario from "./screens/Formulario";
import Lista from "./screens/Lista";
import Drna from "./screens/Drna";

const StackDenuncias = createNativeStackNavigator();

function Stacks() {
  return (
    <StackDenuncias.Navigator initialRouteName="DenunciasIni">
      <StackDenuncias.Screen name="Denuncias" component={Denuncias} />
      <StackDenuncias.Screen name="Formulario" component={Formulario} />
      <StackDenuncias.Screen name="Lista" component={Lista} />
      <StackDenuncias.Screen name="Drna" component={Drna} />
    </StackDenuncias.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function Tabs() {
  return (
    <Tab.Navigator initialRouteName="Denuncias">
      <Tab.Screen
        name="Denuncias"
        component={Stacks}
        options={{
          headerShown: false,
        }}
      />
      <Tab.Screen name="Derechos" component={Derechos} />
      <Tab.Screen name="Analisis" component={Analisis} />
    </Tab.Navigator>
  );
}

export default function Navigation() {
  return (
    <NavigationContainer>
      <Tabs />
    </NavigationContainer>
  );
}