import {
  Box,
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerHeader,
  DrawerOverlay,
  IconButton,
  useDisclosure,
  VStack,
} from '@chakra-ui/react'
import { useRef } from 'react'
import { BiMenu } from 'react-icons/bi'
import Logo from '../Logo'
import MenuLinks from './MenuLinks'

const MenuDrawer = () => {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = useRef()

  return (
    <>
      <Box display={[null, null, 'none']}>
        <IconButton
          onClick={onOpen}
          aria-label='Menu'
          variant='ghost'
          fontSize='3xl'
          icon={<BiMenu />}
        />
      </Box>
      <Drawer
        isOpen={isOpen}
        placement='right'
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>
            <Box px='4' pt='4'>
              <Logo w='40' />
            </Box>
          </DrawerHeader>

          <DrawerBody>
            <VStack align='stretch' w='100%'>
              <MenuLinks size='md' />
            </VStack>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  )
}

export default MenuDrawer