import { markRaw, defineAsyncComponent } from 'vue'

export default
{
  name: 'text',
  data: { german: { text: '' }, english: { text: '' }, errors: [] },
  renderDesktop: (element, lang) => `
                                    <tr section="${element.id}">
                                        <td align="left" style="padding-left: 20px; padding-right: 20px; padding-top: 0px;  padding-bottom: 10px;">
                                            <p style="max-width: 850px; word-wrap: break-word">${element.data[lang].text}</p>
                                        </td>
                                    </tr>
                                    `,
  renderMobile: (element, lang) => `
                                    <tr section="${element.id}">
                                      <td align="left" style="font-size:30px; padding-left: 20px; padding-right: 20px; padding-top: 20px;  padding-bottom: 10px;">
                                          <p style="max-width: 850px; word-wrap: break-word">${element.data[lang].text}</p>
                                        </td>
                                    </tr>
  `,
  component: markRaw(defineAsyncComponent(() => import('src/components/NewsletterElements/TextElement.vue')))
}