import { useRef } from 'react';
import {
  HStack,
  VStack,
  IconButton,
  Link,
  useDisclosure,
  Drawer,
  DrawerBody,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  DrawerHeader,
} from '@chakra-ui/react';
import { HamburgerIcon } from '@chakra-ui/icons';

const pages = [
  {'url':'rules','name' : 'Peraturan'},
  {'url':'strategies','name': 'Strategi'}, 
  {'url':'history','name':'Sejarah'}
];

export function Navigation() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = useRef();
  return (
    <>
      <HStack as="nav" display={['none', 'none', 'block']} spacing={[2, 2, 4]}>
        {pages.map((page) => (
          <Link
            key={`navlink-desktop-${page.url}`}
            fontSize="lg"
            fontWeight="bold"
            href={`/${page.url}`}
          >
            {page.name}
          </Link>
        ))}
      </HStack>
      <IconButton
        ref={btnRef}
        display={['block', 'block', 'none']}
        aria-label="Open Menu"
        icon={<HamburgerIcon />}
        onClick={onOpen}
        size="sm"
      />
      <Drawer
        finalFocusRef={btnRef}
        isOpen={isOpen}
        onClose={onClose}
        placement="right"
        size="xs"
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Explore</DrawerHeader>
          <DrawerBody>
            <VStack as="nav">
              {pages.map((page) => (
                <Link
                  key={`navlink-mobile-${page}`}
                  fontSize="lg"
                  fontWeight="bold"
                  href={`/${page}`}
                >
                  {page}
                </Link>
              ))}
            </VStack>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
}