import React from "react";
import styled from "styled-components";
import colors from "@theme/colors";
import breakpoints from "@theme/breakpoints";
import { Link } from "@components/index";

interface NavbarChildLinkProps {
  to: string;
}

const StyledLink = styled(Link)`
  display: block;
  padding: 1rem;
  letter-spacing: 1.5px;
  padding-right: 4rem;
  font-weight: 400;

  @media screen and (max-width: ${breakpoints.medium}) {
    border-bottom: 1px dotted ${colors.lightBlue};
    margin-left: 2rem;
    padding-left: 0;
  }

  &:hover {
    @media screen and (min-width: ${breakpoints.medium}) {
      background-color: ${colors.lightBlue};
    }
  }
`;

const NavbarChildLink: React.FC<NavbarChildLinkProps> = (props) => (
  <StyledLink passHref {...props} />
);

export default NavbarChildLink;
