"use client";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import NavigationContent from "../NavigationContent";
import React from "react";
import Drawer from "@mui/material/Drawer";

const NavigationToggle: React.FC = () => {
  const [isOpened, setIsOpened] = React.useState(false);

  const openNavigation = () => {
    setIsOpened(true);
  };
  const closeNavigation = () => {
    setIsOpened(false);
  };

  return (
    <>
      <Drawer variant="permanent" sx={{ display: { xs: "none", xl: "block" } }}>
        <NavigationContent/>
      </Drawer>
      <Drawer
        sx={{ display: { xl: "none" } }}
        open={isOpened}
        onClose={closeNavigation}
        ModalProps={{
          keepMounted: true,
        }}
      >
        <NavigationContent/>
      </Drawer>
      <IconButton
        sx={{ display: { xl: "none" } }}
        onClick={openNavigation}
        edge="start"
        aria-label="menu"
        color="inherit"
      >
        <MenuIcon fontSize="inherit" />
      </IconButton>
    </>
  );
};

export default NavigationToggle;