import React, {useContext,useEffect} from 'react';
import {
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';
import {View, StyleSheet, Text} from 'react-native';
import Button from './Button';
import {AuthContext} from '../context/AuthContext';


export default function CustomDrawer(props) {
  const { userInfo } = useContext(AuthContext);
  
  return (
    <View style={{flex: 1}}>
      <DrawerContentScrollView {...props}>
        <View style={styles.infoStyle}>
          <Text style={styles.infoText}>{userInfo?.id}님</Text>
        </View>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
      {/* <View style={styles.logoutStyle}>
        <Button title={'Logout'} />
      </View> */}
    </View>
  );
}

const styles = StyleSheet.create({
  logoutStyle: {
    padding: 10,
  },
  infoStyle: {
    padding: 10,
    height: 100,
  },
  infoText: {
    textAlign: 'center',
  },
});