import { Menu, Box, useTheme } from "@mui/material";
import { Link } from "react-router-dom";

import type { MenuItem } from "./Menu";

type DropDownMenuProps = {
  anchorElement: HTMLElement | null,
  setAnchorElement: (element: null) => void,
  items: MenuItem[],
};

export const DropDownMenu = ({
  anchorElement,
  setAnchorElement,
  items = [],
}: DropDownMenuProps) => {
  const theme = useTheme();

  return (
    <Menu
      anchorEl={anchorElement}
      open={!!anchorElement}
      onClose={() => setAnchorElement(null)}
      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
      sx={{
        "&.MuiMenu-root.MuiModal-root": { zIndex: "1" },
        "& .MuiPaper-root.MuiMenu-paper": {
          padding: "0 10px",
          borderRadius: "5px",
          background: theme.palette.bg.dark,
          margin: "0",
        },
      }}
    >
      {items.map(({ name, url }) => (
        <Box sx={{ "& a:hover": { background: theme.palette.bg.main } }}>
          <Link
            key={name}
            style={{
              display: "block",
              textDecoration: "none",
              color: theme.palette.common.white,
              padding: "5px",
              borderRadius: "3px",
              transition: ".2s",
            }}
            to={url}
          >
            {name}
          </Link>
        </Box>
      ))}
    </Menu>
  );
};