import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'

// TODO: Refactor this to allow setting each border property separately

class Box extends Component {
  static propTypes = {
    borderTop: PropTypes.object,
    borderBottom: PropTypes.object,
    borderRight: PropTypes.object,
    borderLeft: PropTypes.object,
    border: PropTypes.object,
    radius: PropTypes.number,
    background: PropTypes.string,
    children: PropTypes.node,
  }

  render() {
    const { children, background, borderTop, borderBottom, borderLeft,
      borderRight, border, radius } = this.props

    return (
      <div style={[
        { height: '100%', width: '100%' },
        background && { backgroundColor: background },
        radius && { borderRadius: radius },
        border ? { border } : { borderTop, borderBottom, borderLeft, borderRight },
      ]}>
        {children}
      </div>
    )
  }
}

export default Radium(Box)