import { useMemo } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import GridItem from "../../../layout/GridItem/index.js";
import classes from './styles.module.scss';
const Column = function Column(props) {
  const {
    node,
    components,
    LayoutNode
  } = props;
  const {
    columns = true,
    sticky = false,
    reverseMobile,
    nodes = []
  } = node;
  const hasGrower = useMemo(() => nodes.some(({
    grow
  }) => grow), [nodes]);
  return <GridItem xs="12" md={columns}>
      <div className={classnames(classes.columnContents, {
      [classes.hasGrower]: hasGrower,
      [classes.reverseMobile]: reverseMobile,
      [classes.sticky]: sticky
    })}>
        {nodes.map(childNode => <LayoutNode key={childNode.id} node={childNode} components={components} />)}
      </div>
    </GridItem>;
};
Column.defaultProps = {
  components: undefined
};
Column.propTypes = {
  node: PropTypes.shape({
    columns: PropTypes.number,
    reverseMobile: PropTypes.bool,
    sticky: PropTypes.bool,
    nodes: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.string.isRequired
    }))
  }).isRequired,
  components: PropTypes.shape({}),
  LayoutNode: PropTypes.elementType.isRequired
};
export default Column;