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

import CardManager from "./CardManager";
import {TouchableOpacity} from "react-native";

const Stack = createNativeStackNavigator();

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

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