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

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

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

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