import React, { useState } from "react";
import { AppBar, Toolbar, IconButton } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import Dropdown from "./dropDown/DropDown";
import AccountMenu from "./accountMenu/AccountMenu";
import "./Header.scss";

const Header = () => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  // Handle menu open
  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  // Handle menu close
  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const handleChange = (e: any) => {};

  return (
    <AppBar
      className="header"
      position="sticky"
      color="transparent"
      elevation={0}
      sx={{ borderBottom: "1px solid #22242626" }}
    >
      <Toolbar className="header__toolbar">
        <div className="header__left-group">
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Dropdown onChange={handleChange} />
        </div>

        <div className="header__right-group">
          <AccountMenu />
        </div>
      </Toolbar>
    </AppBar>
  );
};

export default Header;