import Drawer from "@mui/material/Drawer";
import styles from "./styles.module.scss";
import DrawerMenuList from "../DrawerMenuList";
import { drawerMenuItems, sprites } from "../../data";

interface IDrawerMenuProps {
  open: boolean;
  toggleDrawer: (newOpen: boolean) => () => void;
}

function DrawerMenu({ open, toggleDrawer }: IDrawerMenuProps) {
  return (
    <Drawer
      classes={{
        paper: styles["drawer-paper"],
      }}
      open={open}
      onClose={toggleDrawer(false)}
    >
      <div className={styles.close}>
        <span className={styles["close-wrapper"]} onClick={toggleDrawer(false)}>
          <svg
            aria-hidden="true"
            width="16px"
            height="16px"
            className={styles["close-icon"]}
          >
            <use xlinkHref={`${sprites}#cross`}></use>
          </svg>
        </span>
      </div>
      <DrawerMenuList items={drawerMenuItems} />
    </Drawer>
  );
}

export default DrawerMenu;
