import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { withRouter } from 'next/router';

import { HeaderContainer, LinkStyled } from './styles';

const Header = ({ router: { pathname } }) => (
  <HeaderContainer>
    <Link prefetch href="/">
      <LinkStyled isActive={!!(pathname === '/')}>Home</LinkStyled>
    </Link>
    <Link prefetch href="/about">
      <LinkStyled isActive={!!(pathname === '/about')}>About</LinkStyled>
    </Link>
  </HeaderContainer>
);

Header.propTypes = {
  router: PropTypes.shape({
    pathname: PropTypes.string,
  }).isRequired,
};

export default withRouter(Header);