text: import React from "react"
  import { Link , graphql , useStaticQuery } from "gatsby"
  import HeaderStyles from "../styles/header.module.scss"
  // hyphen is camel case in classname
  
  const Header = () => {
      const data = useStaticQuery(graphql`
      query {
          site {
            siteMetadata {
              title
              author
            }
          }
        }
      `)
      return (
          <header className={HeaderStyles.header}>
              <h1>
                  <Link className={HeaderStyles.title} to="/">{data.site.siteMetadata.author}</Link>
              </h1>
              <nav>
                  <ul className={HeaderStyles.navList}> 
                      <li> 
                          <Link to="/" className={HeaderStyles.link} className={HeaderStyles.navItem} activeClassName={HeaderStyles.activeNavItem}> Home </Link>
                      </li>
                      <li> 
                          <Link to="/blog" className={HeaderStyles.link} className={HeaderStyles.navItem} activeClassName={HeaderStyles.activeNavItem}> Blog </Link>
                      </li>
                      <li> 
                          <Link to="/about" className={HeaderStyles.link} className={HeaderStyles.navItem} activeClassName={HeaderStyles.activeNavItem}> About </Link>
                      </li>
                      <li> 
                          <Link to="/contact" className={HeaderStyles.link} className={HeaderStyles.navItem} activeClassName={HeaderStyles.activeNavItem}> Contact </Link>
                      </li>
                  </ul>
              </nav>
          </header>
      )
  }
  
  export default Header