import { List, ListItem, ListItemButton, ListItemText } from "@mui/material"
import { Link as GatsbyLink } from "gatsby"
import React from "react"

const navMenuItems = [
  {label: "Home", path: "/"},
  {label: "About", path: "/about"},
  {label: "Services", path: "/services"},
  {label: "Our work", path: "/work"},
  {label: "Handbook", path: "/handbook"},
  {label: "Blog", path: "/blog"},
]

const NavMenu = () => {
  return (
    <nav>
      <List>
        {navMenuItems.map(({label, path}) => (
          <ListItem key={label}>
            <ListItemButton component={GatsbyLink} to={path}>
              <ListItemText primary={label} primaryTypographyProps={{align: "right"}} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </nav>
      
  )
}

export default NavMenu