import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import v from '../../config/variables'

const NavbarLinkContainer = styled.a`
  display: block;
  margin-right: ${v.base.gutter / 2}px;
  padding: ${v.base.gutter}px;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  color: ${v.navbarLink.color};

  &:hover {
    text-decoration: none;
  }
`

const NavbarLinkInner = styled.div`
  border-bottom: ${props => props.active ? v.navbarLink.active.border : v.navbarLink.border};

  :hover {
    border-bottom: ${v.navbarLink.hover.border};
  }
`

class NavbarLink extends React.Component {
  static propTypes = {
    children: PropTypes.string.isRequired,
    to: PropTypes.string,
    active: PropTypes.bool,
    onPress: PropTypes.func
  }

  static defaultProps = {
    children: null,
    to: null,
    active: false,
    onPress: null
  }

  handleOnPress = () => {
    const { onPress, to } = this.props
    onPress && onPress(to)
  }

  render() {
    return (
      <NavbarLinkContainer
        href="javascript:void(0);"
        onClick={this.handleOnPress}
      >
        <NavbarLinkInner active={this.props.active}>
          {this.props.children}
        </NavbarLinkInner>
      </NavbarLinkContainer>
    )
  }
}

export default NavbarLink
