import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import CardsOverviewScreen from '../modules/cards/screens/CardsOverviewScreen';
import CardDetailsScreen from '../modules/cards/screens/CardDetailsScreen';
import RequestPhysicalCardScreen from '../modules/cards/screens/RequestPhysicalCardScreen';
import ApplyCreditCardScreen from '../modules/cards/screens/ApplyCreditCardScreen';
import type { CardsStackParamList } from './types';
import { CARDS_ROUTE_FEATURES, useRouteGuard } from './featureRoutes';

const Stack = createNativeStackNavigator<CardsStackParamList>();

export const CardsNavigator = () => {
  const canRoute = useRouteGuard(CARDS_ROUTE_FEATURES);

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {canRoute('CardsOverview') && <Stack.Screen name="CardsOverview" component={CardsOverviewScreen} />}
      {canRoute('CardDetails') && <Stack.Screen name="CardDetails" component={CardDetailsScreen} />}
      {canRoute('RequestPhysicalCard') && <Stack.Screen name="RequestPhysicalCard" component={RequestPhysicalCardScreen} />}
      {canRoute('ApplyCreditCard') && <Stack.Screen name="ApplyCreditCard" component={ApplyCreditCardScreen} />}
    </Stack.Navigator>
  );
};