import React 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 handleChange = () => {};

  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;