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

// Style
/* istanbul ignore next */
if (typeof window !== 'undefined') require('./style.scss');

const Flex = props => (
  <props.tag {...props} className={`Flex Flex_${props.layout} ${props.className || ''}`}>
    {props.children}
  </props.tag>
);

Flex.propTypes = {
  align: PropTypes.oneOf(['center', 'start', 'end', 'baseline', 'stretch']),
  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
  inline: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
  justify: PropTypes.oneOf(['center', 'start', 'end', 'between', 'around']),
  layout: PropTypes.oneOf(['row', 'col']),
  tag: PropTypes.string,
  text: PropTypes.oneOf(['left', 'center', 'right']),
};

Flex.defaultProps = {
  align: 'start',
  justify: 'between',
  layout: 'row',
  tag: 'div',
};

export default Flex;
