import {Plus} from "lucide-react-native";
import {TouchableOpacity} from "react-native";
import {useTheme} from "@react-navigation/native";
import {createNativeStackNavigator} from "@react-navigation/native-stack";

import ServerCardIn from "./ServerCardIn";
import ServerManager from "./ServerManager";

const Stack = createNativeStackNavigator();

export default function ServerManagerStack({navigation}) {
    const theme = useTheme();

    return (
        <Stack.Navigator>
            <Stack.Group screenOptions={{
                headerLargeTitle: true,
                headerBlurEffect: "regular",
                headerStyle: {
                    backgroundColor: theme.colors.background
                }
            }}>
                <Stack.Screen name="server-listing"
                              component={ServerManager}
                              options={{
                                  title: "Servers",
                                  headerRight: () => <TouchableOpacity
                                      onPress={() => navigation.navigate('add-server')}>
                                      <Plus/>
                                  </TouchableOpacity>
                              }}/>

                <Stack.Screen name="server" options={{title: "Server", headerTransparent: true}} component={ServerCardIn}/>
            </Stack.Group>
        </Stack.Navigator>
    );
}