import React from "react";
import SidebarItem from "./SidebarItem.jsx";
import Button from "../component/Button.jsx";
import HouseIcon from "@mui/icons-material/House";
import PersonIcon from "@mui/icons-material/Person";
import Diversity1Icon from "@mui/icons-material/Diversity1";
import DoorFrontIcon from "@mui/icons-material/DoorFront";
import SpeakerPhoneIcon from "@mui/icons-material/SpeakerPhone";
import SettingsIcon from "@mui/icons-material/Settings";
import CallIcon from '@mui/icons-material/Call';

export const items = [
  {
    title: "Home",
    path: "/Main",
    icon: <HouseIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />,
  },
  {
    title: "사용자 관리",
    path: "/UserAuthoriySelect",
    icon: (
      <PersonIcon sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }} />
    ),
  },
  {
    title: "장비 관리",    
    icon: (
      <SpeakerPhoneIcon
        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
      />
    ),
    childrens: [
      {
        title: "장비 조회",
        path: "/EquipmentManagementSelect",
      },
      {
        title: "장비 반납/교환 요청",
        path: "/EquipmentManagementSelectReturn",
      },
      {
        title: "장비 추가 요청",
        path: "/EquipmentManagementSelectReturn",
      },
    ],
  },    
  {
    title: "문의게시판",
    path: "/EquipmentManagementSelectReturn",
    icon: (
      <SpeakerPhoneIcon
        sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
      />
    ),
  },
];

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

  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 flex50">관리자</div>
            <Button className={"logout flex50"} btnName={"로그아웃"} />
          </div>
        </div>
      </div>
    </nav>
  );
}