import React from 'react'

const styles = {
  padding: '24px',
  display: 'flex',
  flexDirection: 'column',
  boxShadow: 'var(--depth1)',
  background: 'var(--colorWhiteBase)'
}

export const Pane = (props) => {
  const { padding, classNames, ...otherProps } = props
  const style = { ...styles, padding }
  const className = `EPane ${classNames}`
  return <div {...otherProps} style={style} className={className} />
}

Pane.defaultProps = {
  className: '',
  padding: '24px'
}