import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './HolyGrail.style.js'

class HolyGrail extends Component {
  static propTypes = {
    children: PropTypes.node
  }

  render() {
    return (
      <div style={style.base}>{this.props.children}</div>
    )
  }
}

HolyGrail.Header = Radium(class HolyGrailHeader extends Component {
  static propTypes = {
    children: PropTypes.node
  }

  render() {
    return (
      <div style={style.header}>{this.props.children}</div>
    )
  }
})

HolyGrail.Footer = Radium(class HolyGrailFooter extends Component {
  static propTypes = {
    children: PropTypes.node
  }

  render() {
    return (
      <div style={style.footer}>{this.props.children}</div>
    )
  }
})

HolyGrail.Body = Radium(class HolyGrailBody extends Component {
  static propTypes = {
    children: PropTypes.node
  }

  render() {
    return (
      <div style={style.body}>{this.props.children}</div>
    )
  }
})

export default Radium(HolyGrail)