// @flow
import React from 'react'
import styled from 'styled-components'
import type { Node } from 'react'

const Wrapper = styled.div`
  background-color: ${props => props.backgroundColor || 'transparent'};
  height: ${props => props.height};
  padding: 50px;
  width: calc(100% - 2 * 50px);
`
type Props = {
  backgroundColor?: string,
  height?: string,
  children: Node
}

export const StoryWrapper = ({ backgroundColor, height, children }: Props) => (
  <Wrapper backgroundColor={backgroundColor} height={height}>
    {children}
  </Wrapper>
)

export default StoryWrapper
