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

import CardManager from "./CardManager";

const Stack = createNativeStackNavigator();

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

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