import Stack from "@mui/material/Stack"
import Toolbar from "@mui/material/Toolbar"
import MuiNextLink from "@components/MuiNextLink"

const Navbar = ({ navLinks }) => {
  return (
    <Toolbar
      component="nav"
      sx={{
        display: { xs: `none`, md: `flex` }
      }}
    >
      <Stack direction="row" spacing={4}>
        {navLinks.map(({ title, path }, i: string) => (
          <MuiNextLink
            key={`${title}${i}`}
            href={path}
            variant="button"
            sx={{ color: `white`, opacity: 0.7 }}
          >
            {title}
          </MuiNextLink>
        ))}
      </Stack>
    </Toolbar>
  )
}

export default Navbar