import { createElement } from '__RAX_OR_REACT__';
import { string, func, arrayOf, object, bool } from 'prop-types';
import CompGroups from './CompGroups';

function Page(props) {
  const { name, title, groups, render, theme } = props;

  return (
    <div key={name} className='comp-page'>
      <div className='headline1'>{title}</div>
      <div className='page-body'>
        {groups
          ? groups.map((group, index) => (
              <CompGroups
                key={index}
                render={render}
                {...group}
                theme={theme}
              ></CompGroups>
            ))
          : render({ theme })}
      </div>
    </div>
  );
}

Page.propTypes = {
  name: string,
  title: string,
  theme: arrayOf(object),
  groups: arrayOf(object),
  render: func,
  isDevice: bool,
};

export default Page;