import components from '../elements-components';
import elementsProps from '../elements-props';
import titles from '../elements-titles';
import types from '../elements-types';
import map from '../map';
import { Container, Head } from '@/Components/Layout/Element';

const render = Object.keys(map).reduce((acc, elementName) => {
  const title = titles[elementName];
  const valueName = map[elementName];
  const Component = components[elementName];
  const props = elementsProps[elementName];
  const { builder } = types[elementName]();

  const Element = builder(Component, {
    elementName,
    valueName,
  });

  acc[elementName] = {
    render: () => (
      <Container key={elementName}>
        <Head title={title} htmlFor={elementName} />
        <Element {...props} id={elementName} />
      </Container>
    ),
  };

  return acc;
}, {});

export default render;
