import styles from './index.module.scss'
import ActiveLink from '../ActiveLink'
import { Svg } from 'react-optimized-image'

export default function HeaderNav() {
  return (
    <header className={styles.header}>
      <nav className={styles.nav}>
        <div className={styles.navPart1}>
          <ActiveLink href="/" activeClassName={styles.active}><a className={styles.link}>Home</a></ActiveLink>
          <ActiveLink href="/posts" activeClassName={styles.active}><a className={styles.link}>Posts</a></ActiveLink>
          <ActiveLink href="/tools" activeClassName={styles.active}><a className={styles.link}>Toolbox</a></ActiveLink>
        </div>
        <div className={styles.navPart2}>
          <a
            href="https://twitter.com/lukegb"
            className={styles.link}
            aria-label="Twitter"
          >
            <Svg src={require('./assets/iconmonstr-twitter-1.svg')} viewBox="0 0 24 24" />
          </a>
          <a
            href="https://github.com/lukegb"
            className={styles.link}
            aria-label="GitHub"
          >
            <Svg src={require('./assets/iconmonstr-github-1.svg')} viewBox="0 0 24 24" />
          </a>
        </div>
      </nav>
    </header>
  )
}