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

import './section-row.scss';

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  marginTop: PropTypes.bool,
  marginBottom: PropTypes.bool,
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ])
};

const defaultProps = {
  className: undefined,
  marginTop: false,
  marginBottom: false,
  component: 'div'
};

const Row = ({ className, marginTop, marginBottom, component: Component, ...props }) => (
  <Component
    className={className}
    styleName={classNames('base', {
      'margin-top': marginTop,
      'margin-bottom': marginBottom
    })}
    {...props}
  />
);

Row.propTypes = propTypes;
Row.defaultProps = defaultProps;

export default Row;
