text: import Logo from "./logo";
  import NextLink from "next/link";
  import {
    Box,
    Container,
    Flex,
    Heading,
    IconButton,
    Link,
    Menu,
    MenuButton,
    MenuItem,
    MenuList,
    useColorModeValue,
    Stack,
  } from "@chakra-ui/react";
  import { HamburgerIcon } from "@chakra-ui/icons";
  import ThemeToggle from "./theme-toggle";
  
  const LinkItem = ({ href, path, children, ...props }) => {
    const active = path === href;
    const inactiveColor = useColorModeValue("#7c6f64", "#a89984");
    return (
      <NextLink href={href} passHref scroll={false}>
        <Link
          p={2}
          bg={active ? "#8ec07c" : undefined}
          color={active ? "#282828" : inactiveColor}
          rounded="md"
          {...props}
        >
          {children}
        </Link>
      </NextLink>
    );
  };
  
  const NavBar = (props) => {
    const { path } = props;
    return (
      <Box
        position="fixed"
        as="nav"
        w="100%"
        bg={useColorModeValue("#f2e5bc80", "#32302f80")}
        css={{ backdropFilter: "blur(10px)" }}
        zIndex={4}
        {...props}
      >
        <Container
          display="flex"
          p={2}
          maxW="container.md"
          wrap="wrap"
          alignItems="center"
          justify="space-between"
        >
          <Flex align="center" mr={5}>
            <Heading as="h1" size="lg" letterSpacing={"tighter"}>
              <Logo />
            </Heading>
          </Flex>
          <Stack
            direction={{ base: "column", md: "row" }}
            display={{ base: "none", md: "flex" }}
            width={{ base: "full", md: "auto" }}
            alignItems="center"
            flexGrow={1}
          >
            <LinkItem path={path} href="/projects">
              Projects
            </LinkItem>
            <LinkItem path={path} href="/blog">
              Blog
            </LinkItem>
          </Stack>
  
          <Box flex={1} align="right">
            <ThemeToggle />
            <Box ml={2} display={{ base: "inline-block", md: "none" }}>
              <Menu>
                <MenuButton
                  as={IconButton}
                  icon={<HamburgerIcon />}
                  variant="outline"
                  aria-label="options"
                />
                <MenuList>
                  <NextLink href="/" passHref>
                    <MenuItem as={Link}>About</MenuItem>
                  </NextLink>
                  <NextLink href="/projects" passHref>
                    <MenuItem as={Link}>Projects</MenuItem>
                  </NextLink>
                  <NextLink href="/blog" passHref>
                    <MenuItem as={Link}>Blog</MenuItem>
                  </NextLink>
                </MenuList>
              </Menu>
            </Box>
          </Box>
        </Container>
      </Box>
    );
  };
  
  export default NavBar;
  