import AppBar from '@mui/material/AppBar'
import Container from '@mui/material/Container'
import Toolbar from '@mui/material/Toolbar'
import IconButton from '@mui/material/IconButton'
import Home from '@mui/icons-material/Home'
import { styled } from '@mui/system'
import MuiNextLink from '@components/MuiNextLink'
import Navbar from '@components/Navbar'
import SideDrawer from '@components/SideDrawer'

const Offset = styled("div")(({ theme }) => theme.mixins.toolbar)

const navLinks = [
  { title: `home`, path: '/' },
  { title: `about`, path: '/about' },
]

const Header = () => {
  return (
    <>
      <AppBar position="fixed">
        <Toolbar>
          <Container
            maxWidth="lg"
            sx={{ display: "flex", justifyContent: "space-between" }}
          >
            <IconButton edge="start" aria-label="home">
              <MuiNextLink activeClassName="active" href="/">
                <Home
                  sx={{
                    color: (theme) => theme.palette.common.white,
                  }}
                  fontSize="large"
                />
              </MuiNextLink>
            </IconButton>
            <Navbar navLinks={navLinks} />
            <SideDrawer navLinks={navLinks} />
          </Container>
        </Toolbar>
      </AppBar>
      <Offset />
    </>
  )
}

export default Header