import React from 'react';

export const Columns = props => (
  <div style={{
    ...props.settings.properties,
    justifyContent: 'normal',
    display: 'block',
    padding: 0,
    height: props.settings.properties.height || 'unset',
    width: props.settings.properties.width || '100%',
    marginTop: props.settings.properties.marginTop || 0,
  }}
  >
    <div style={{
      display: 'flex',
      padding: props.settings.properties.hasOwnProperty('padding') ? props.settings.properties.padding : 0,
      flexWrap: 'wrap',
      height: '100%',
    }}
    >
      {props.children}
    </div>
    <div style={{ clear: 'both' }} />
  </div>
);

export const Column = (props) => {
  const style = props.settings ? props.settings.properties : {};
  return (<div style={{ ...style, ...props.style, ...props.borderStyle, width: '100%', height: '100%' }}>
    {props.children}
  </div>);
};

export default Columns;