content: import './styles.scss';
  import PropTypes from 'prop-types';
  import React from 'react';
  import classNames from 'classnames';
  
  const classMap = {
      // Define width for breakpoints
      xs: 'liq_layout-fb-col-xs',
      sm: 'liq_layout-fb-col-sm',
      md: 'liq_layout-fb-col-md',
      lg: 'liq_layout-fb-col-lg',
      // Define from which breakpoints on the given offset should be applied
      xsOffset: 'liq_layout-fb-col-xs-offset',
      smOffset: 'liq_layout-fb-col-sm-offset',
      mdOffset: 'liq_layout-fb-col-md-offset',
      lgOffset: 'liq_layout-fb-col-lg-offset'
  };
  /**
   * Column component
   * @param {Object} props      - The props for the component
   * @returns {React.Component} - Component to be returned
   */
  const Col = props => {
      const colBaseClasses = Object.keys(props)
          .filter(key => classMap[key])
          .map(key => {
              // take care of valid classnames
              const colBase = !(typeof props[key] === 'boolean')
                  ? classMap[key] + '-' + props[key]
                  : classMap[key];
              return colBase;
          })
          .join(' ')
          .toString();
  
      const hasBreakpoint = props.xs || props.sm || props.md || props.lg;
      const classes = classNames(
          'liq_layout-fb-col',
          props.className,
          colBaseClasses,
          {
              ['liq_layout-fb-flex']: !props.noFlex && props.flex !== undefined,
              reverse: props.reverse,
              [classMap.xs]: !hasBreakpoint
          }
      );
  
      const TagName = props.tagName || 'div';
  
      return (
          <TagName
              className={classes}
              children={props.children}
              onClick={props.onClick}
          />
      );
  };
  
  const ColModificatorType = PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.bool,
      PropTypes.string
  ]);
  
  Col.propTypes = {
      /**
       * @memberof Col.props
       * @prop {ColModificatorType} xs        - display as column from xs-breakpoint on
       */
      xs: ColModificatorType,
      /**
       * @memberof Col.props
       * @prop {ColModificatorType} sm        - display as column from sm-breakpoint on
       */
      sm: ColModificatorType,
      /**
       * @memberof Col.props
       * @prop {ColModificatorType} md        - display as column from md-breakpoint on
       */
      md: ColModificatorType,
      /**
       * @memberof Col.props
       * @prop {ColModificatorType} lg        - display as column from lg-breakpoint on
       */
      lg: ColModificatorType,
      /**
       * @memberof Col.props
       * @prop {number} xsOffset              - add an xs offset to the column
       */
      xsOffset: PropTypes.number,
      /**
       * @memberof Col.props
       * @prop {number} smOffset              - add an sm offset to the column
       */
      smOffset: PropTypes.number,
      /**
       * @memberof Col.props
       * @prop {number} mdOffset              - add an md offset to the column
       */
      mdOffset: PropTypes.number,
      /**
       * @memberof Col.props
       * @prop {number} lgOffset              - add an lg offset to the column
       */
      lgOffset: PropTypes.number,
      /**
       * @memberof Col.props
       * @prop {boolean} reverse              - display elements reversed
       */
      reverse: PropTypes.bool,
      /**
       * @memberof Col.props
       * @prop {string} className             - classes that should be added to the column
       */
      className: PropTypes.string,
      /**
       * @memberof Col.props
       * @prop {string} tagName               - tag that should be used instead of a div
       */
      tagName: PropTypes.string,
      /**
       * @memberof Col.props
       * @prop {Object} children              - content which should be wrapped by the column
       */
      children: PropTypes.node,
      /**
       * @memberof Col.props
       * @prop {boolean} noFlex               - should the column not be displayed as flex item?
       */
      noFlex: PropTypes.bool,
      /**
       * @memberof Col.props
       * @prop {boolean} flex                 - should the column itself being displayed as flex?
       */
      flex: PropTypes.bool
  };
  
  export default Col;
  