import { Box, Center, HStack } from '@chakra-ui/react'
import Logo from '../Logo'
import MenuDrawer from './MenuDrawer'
import MenuLinks from './MenuLinks'

const Menu = () => {
  return (
    <Center py='6' px={['6', '8', '12']}>
      <HStack
        maxW='container.xl'
        w='100%'
        justify='space-between'
        align='center'
      >
        <Logo w={['40', null, '48', '72']} />
        <HStack spacing='4' display={['none', null, 'flex']}>
          <MenuLinks />
        </HStack>
        <Box display={['block', null, 'none']}>
          <MenuDrawer />
        </Box>
      </HStack>
    </Center>
  )
}

export default Menu