import React from "react";
import SidebarItem from "./SidebarItem.jsx";
import Button from "../component/Button.jsx";
import GroupAddIcon from '@mui/icons-material/GroupAdd';
import LogoutIcon from '@mui/icons-material/Logout';
import { useNavigate } from "react-router";

export default function Sidebar({items}) {
  const [menuToggle, setMenuToggle] = React.useState(false);
  const navigate = useNavigate();

  return (
    <nav
      className={!menuToggle ? "nav" : "burger__menu"}
      onClick={() => (menuToggle ? setMenuToggle(false) : setMenuToggle(true))}
    >
      <h1 className="logo">시니어 케어 시스템</h1>
      <div className="flex-align-column" style={{ height: `calc(100% - 72px)` }}>
        <ul>
          {items.map((item, index) => (
            <SidebarItem key={index} item={item} />
          ))}
        </ul>
        <div className="info-wrap ">
          <div className="bottom-section flex">
            <div className="info-id" onClick={() => {
            navigate("/Join");
          }}><GroupAddIcon sx={{ width: "20px", height: "20px", color: "#ffffff",}} />계정추가</div>
            <div className="logout"><LogoutIcon sx={{ width: "20px", height: "20px", color: "#ffffff",}}/>로그아웃</div>
          </div>
        </div>
      </div>
    </nav>
  );
}