// React
import { Link } from "react-router-dom";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import { Button } from "@mui/material";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";

export default function Navbar() {
  const theme = useTheme();
  const hideNavLinks = useMediaQuery(theme.breakpoints.down("md"));
  return (
    <AppBar position="fixed" sx={{ bgcolor: "black" }}>
      <Box
        sx={{
          flexGrow: 1,
          margin: "0 auto",
          width: "100%",
          maxWidth: 1200,
          display: "block",
        }}
      >
        <Toolbar disableGutters sx={{ display: "flex", padding: "0 10px" }}>
          <a href="/">
            <IconButton
              size="large"
              edge="start"
              color="inherit"
              aria-label="menu"
              sx={{ mr: -0.5 }}
            >
              <img src="/images/logo.png" width="40" height="40" />
            </IconButton>
          </a>
          <Typography variant="h6" noWrap component="div">
            Dunemask
          </Typography>
          {!hideNavLinks && (
            <Box sx={{ marginLeft: "auto" }}>
              <Link to="#portfolio" style={{ textDecoration: "none" }}>
                <Button sx={{ color: "white" }}>Portfolio</Button>
              </Link>
              <Link to="#achievements" style={{ textDecoration: "none" }}>
                <Button sx={{ color: "white" }}>Achievements</Button>
              </Link>
              <Link to="#contact" style={{ textDecoration: "none" }}>
                <Button sx={{ color: "white" }}>Contact</Button>
              </Link>
            </Box>
          )}
        </Toolbar>
      </Box>
    </AppBar>
  );
}
