import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import BottomTab from './Bottom';
import CustomDrawer from './CustomDrawer';
import { useTheme } from '../Hooks/useTheme';
import NavigationString from '../Constant/NavigationString';
import { Dimensions } from 'react-native';

const Drawer = createDrawerNavigator();
const { width } = Dimensions.get('window');

const DrawerStack = () => {
    const { colors } = useTheme();

    return (
        <Drawer.Navigator
            drawerContent={(props) => <CustomDrawer {...props} />}
            screenOptions={{
                headerShown: false,
                drawerType: 'slide',
                drawerStyle: {
                    backgroundColor: colors.background,
                    width: width * 0.75,
                },
                drawerActiveTintColor: colors.primary,
                drawerInactiveTintColor: colors.textSecondary,
                overlayColor: 'rgba(0,0,0,0.5)',
            }}
        >
            <Drawer.Screen
                name="MainTabs"
                component={BottomTab}
                options={{ title: 'Home' }}
            />
            {/* Add other drawer screens here that are NOT in the bottom tab */}
        </Drawer.Navigator>
    );
};

export default DrawerStack;