import React from 'react'
import PropTypes from 'prop-types'

export const Content = ({ children, clouds }) => (
  <main>
    {children}

    <style jsx>{`
      @import 'colors';

      main {
        background-color: $white;
        padding: 20px 0 140px;
        display: flex;
        flex-direction: column;
        flex: 1;

        ${clouds && (`
          background: url('/static/images/clouds.svg') bottom -42px right 0, linear-gradient(to top, #41dcd7, #3083b2);
          background-repeat: no-repeat;
          background-size: 100%;
        `)}
      }
    `}</style>
  </main>
)

Content.propTypes = {
  children: PropTypes.node,
  clouds: PropTypes.bool
}

Content.defaultProps = {
  clouds: false
}

export default Content

@@ -55,23 +55,16 @@
 types'%0A%0A
-export 
 const Co
@@ -242,10 +242,9 @@
 x 0 
-14
+7
 0px;
@@ -407,10 +407,10 @@
 om -
-42
+30
 px r

Update content component