import React from 'react'
import { Box, Flex } from '@chakra-ui/react'
import { RainbowSkeleton } from '../Skeleton/RainbowSkeleton'
import { ProfileDrawer } from './ProfileDrawer'
import { Commander } from '../Commander/Commander'

export const Nav = props => {
  const [profileDrawerOpen, setProfileDrawerOpen] = React.useState(false)

  const toggleProfileDrawer = React.useCallback(() => {
    setProfileDrawerOpen(!profileDrawerOpen)
  }, [profileDrawerOpen])

  return (
    <>
      <Box position='fixed' top={0} left={0} right={0} zIndex={999}>
        <Flex
          as='nav'
          w='100%'
          alignItems={'center'}
          position='relative'
          justifyContent='center'
          flexDir={'row'}
          py={2}
          px={2}
          bg='white'
          boxShadow={'0px 0px 10px rgba(0,0,0,0.1)'}
        >
          <Commander></Commander>
          <RainbowSkeleton
            ml={'auto'}
            w='25px'
            h='25px'
            onClick={toggleProfileDrawer}
            bg={'rgba(0,0,0,0.1)'}
            sx={{}}
            borderRadius='999px'
          ></RainbowSkeleton>
          {/* <RainbowSkeleton w='40px' ml='auto' mr={"4px"}></RainbowSkeleton>
          <RainbowSkeleton></RainbowSkeleton> */}
        </Flex>
      </Box>
      {/* <ProfileDrawer isOpen={profileDrawerOpen}></ProfileDrawer> */}
    </>
  )
}