import PropTypes from 'prop-types';
import LayoutNode from './LayoutNode';
import classes from './styles.module.scss';

/**
 * Renders an election page layout from a Flatpack `nodes` collection.
 */
const ElectionLayout = function ElectionLayout(props) {
  const {
    nodes,
    components
  } = props;
  return <div className={classes.layout}>
      {nodes.map(node => <LayoutNode key={node.id} node={node} components={components} />)}
    </div>;
};
ElectionLayout.defaultProps = {
  nodes: [],
  components: {}
};
ElectionLayout.propTypes = {
  /**
   * The top-level nodes of this layout. Certain layout-specific node types can
   * contain their own arrays of nodes to create a nested layout.
   */
  nodes: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired
  })),
  /**
   * Custom components to render in this layout. Specific layouts may choose
   * only to support particular election components or even add new custom
   * ones.
   */
  components: PropTypes.shape({})
};
export default ElectionLayout;