<template>
  <div style="height: 100%">
    <div class="wrapper">
      <div
        v-for="(widget, index) in widgetType"
        :style="{
          'padding-top': widget.style.padding.top + 'px',
          'padding-bottom': widget.style.padding.bottom + 'px',
          'padding-left': widget.style.padding.left + 'px',
          'padding-right': widget.style.padding.right + 'px',
          'background-color': widget.style.backgroundColor,
        }"
        :key="index"
      >
        <render-widget
          :component-name="widget.type"
          :form-body="formBody"
          :isRender="true"
          :widget="widget"
          v-on:change="$emit('changePost', $event)"
          v-on:submit="$emit('submitPost')"
        />
      </div>
    </div>
  </div>
</template>

<script>
import RenderWidget from "@/components/editor/RenderWidget";
import widgetType from "@/components/helperFiles/widgetType.json";
import formBody from "@/components/helperFiles/formBody.json";
export default {
  name: "WebFromRenderer",
  components: { RenderWidget },
  props: {
    widgetType: Array,
    formBody: Object,
  },
  // data() {
  //   return {
  //     widgetType: widgetType,
  //     formBody: formBody,
  //   };
  // },
};
</script>

<style>
.wrapper {
  max-width: 600px;
  margin: 0 auto;
}
</style>
