import { useState } from "react";
import { IconButton, useTheme } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";

import SectionWrapper from "../SectionWrapper";

import PenaLogo from "../PenaLogo";
import DialogMenu from "./DialogMenu";
import { Link } from "react-router-dom";

interface Props {
  isLoggedIn: boolean;
}

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

  const theme = useTheme();

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <SectionWrapper
      component="nav"
      maxWidth="lg"
      outerContainerSx={{
        backgroundColor: theme.palette.navbarbg.main,
        position: "sticky",
        top: 0,
        zIndex: 1,
        // borderBottom: "1px solid #E3E3E3",
      }}
      sx={{
        height: "51px",
        py: "6px",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >
      <Link to="/"><PenaLogo width={100} /></Link>
      
      <IconButton onClick={handleClickOpen} sx={{ p: 0, width: "30px", color: theme.palette.primary.main }}>
        <MenuIcon sx={{ height: "30px", width: "30px" }} />
      </IconButton>
      <DialogMenu open={open} handleClose={handleClose} />
    </SectionWrapper>
  );
}