import React from "react";
import styled from "styled-components";
import urls from "../lib/urls";
import Link from "./Link";

const StyledNav = styled.nav`
  background: ${(props) => props.theme.colors.primary};
  color: ${(props) => props.theme.colors.black};
`;

const StyledUl = styled.ul`
  margin: 0;
  list-style: none;
  padding: ${(props) => props.theme.spacing["1"]};
  padding: ${(props) => props.theme.spacing["4"]};
`;

const StyledLink = styled(Link)`
  font-weight: bold;
`;

const Nav = () => (
  <StyledNav>
    <StyledUl>
      <li>
        <StyledLink href={urls.home()}>HNTail</StyledLink>
      </li>
    </StyledUl>
  </StyledNav>
);

export default Nav;