import { useState } from "react";
import { Button, useMediaQuery, useTheme } from "@mui/material";
import { Link, useLocation } from "react-router-dom";

import SectionWrapper from "../SectionWrapper";

import PenaLogo from "../PenaLogo";
import DialogMenu from "./DialogMenu";
import { BurgerButton } from "@frontend/kitui";

interface Props {
    isLoggedIn: boolean;
}

export default function NavbarCollapsed({ isLoggedIn }: Props) {
  const [open, setOpen] = useState(false);
  const theme = useTheme();

  return (
    <SectionWrapper
      component="nav"
      maxWidth="lg"
      outerContainerSx={{
        zIndex: "111111111111",
        position: "fixed",
        top: "0",
        backgroundColor: theme.palette.bg.main,
        borderBottom: "1px solid #E3E3E3",
      }}
      sx={{
        height: "51px",
        py: "6px",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >
      <Link to="/">
        <PenaLogo width={100} color="white" />
      </Link>

      <BurgerButton onClick={() => setOpen(!open)} sx={{ color: "white" }} />
      <DialogMenu open={open} handleClose={() => setOpen(false)} />
    </SectionWrapper>
  );
}