import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigatorScreenParams } from '@react-navigation/native';
import { TabStack, TabStackParamList } from './tabStack';
import { CustomDrawerContent } from './customDrawerContent';
import { useTheme } from '@theme';

export type DrawerStackParamList = {
  home: NavigatorScreenParams<TabStackParamList> | undefined;
};

const Drawer = createDrawerNavigator<DrawerStackParamList>();

export const DrawerStack = () => {
  const { theme: colors } = useTheme();

  return (
    <Drawer.Navigator
      drawerContent={CustomDrawerContent}
      screenOptions={{
        swipeEnabled: false,
        headerStyle: {
          backgroundColor: colors.header,
        },
        headerTitleStyle: {
          fontSize: 17,
          fontWeight: '700',
          color: colors.text,
          letterSpacing: 0.2,
        },
        headerTitleAlign: 'center',
        headerTintColor: colors.text,
        headerShadowVisible: false,
      }}>
      <Drawer.Screen
        name="home"
        component={TabStack}
        options={{ headerShown: false }}
      />
    </Drawer.Navigator>
  );
};