import React from "react";
import MenuIcon from "@mui/icons-material/Menu";
import Weather from "../pages/main/Weather.jsx";
import PersonIcon from "@mui/icons-material/Person";
import { useNavigate } from "react-router";

function Header({ title }) {
  const navigate = useNavigate();
  const [headerData, setHeaderData] = React.useState(0);

  return (
    <header>
      <div className="header-flex flex flex-align">
        <div className="page-title flex flex-align">
          {/* <MenuIcon /> */}
          <div className="info-wrap flex">
            <div className="usericon"><PersonIcon sx={{ width:48, height:48,}} /></div>
            <p className="header-info-id">admin1</p>
            <div className="bottom-section flex">
              <div className="info-id" ><span onClick={() => {
                navigate("/Join");
              }}>계정추가</span></div>
              <div className="logout"><span>로그아웃</span></div>
            </div>
          </div>
          {/* <span>{title}</span> */}
        </div>
        <Weather />
      </div>
    </header>
  );
}

export default Header;
