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

const NavbarContainer = styled.nav`
  padding: ${v.base.gutter}px;
  background: ${props => v.backgrounds[props.theme]};
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  a {
    color: ${props => v.colors[props.theme]};
  }
`

class Navbar extends React.Component {
  static propTypes = {
    children: PropTypes.node,
    theme: PropTypes.oneOf([
      'primary',
      'success',
      'warning',
      'danger',
      'info',
      'light'
    ])
  }

  static defaultProps = {
    theme: 'primary'
  }

  render() {
    return (
      <NavbarContainer theme={this.props.theme}>
        {this.props.children}
      </NavbarContainer>
    )
  }
}

export default Navbar
