// import Link from "next/link";
// import { usePathname } from "next/navigation";
import { Link as MLink, Divider, alpha } from "@mui/material";
// import Menuitems from "./MenuItems";

export default function NavLink({ title, href, icon, black }) {
  // const pathname = usePathname();
  const pathname = "/";

  return (<MLink
        // component={Link}
        href={href}
        underline="none"
        sx={{
          display: "flex",
          alignItems: "center",
          fontSize: "1rem",
          gap: ".5rem",
          color: (theme) => {
            const normalColor = black ? theme.palette.menuLight?.contrastText : theme.palette.menu?.contrastText;
            const accentColor = theme.palette.primary.main;
            return pathname === href
              ? accentColor
              : normalColor;},
          "&:hover": {
            color: (theme) => theme.palette.primary.main,
          },
        }}
      >
        {icon} {title}
      </MLink>
  );
}