<script>
import DefaultModal from '@inside-library/components/modals/default/DefaultModal'
import { insertIf } from '@inside-library/helpers/Arrays'

export default {
  name: 'LifestyleModal',
  extends: DefaultModal,
  data() {
    return {
      selection: {}
    }
  },
  methods: {
    scaffold(fields) {
      return {
        title: fields.title,
        subtitle: fields.lifestyle_categories.data
          .map(category => category.title)
          .join(', '),
        sections: [
          {
            fields: [
              ...insertIf(fields.image, {
                tag: 'img',
                data: {
                  src: this.$_getContentImage(fields.image, 'image-card'),
                  alt: fields.title,
                  style: { textAlign: 'center' }
                }
              }),
              {
                tag: 'paragraph-listing',
                data: {
                  heritedData: fields.content,
                  heritedOptions: { template: true }
                }
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
.lifestyle-modal.default-modal .modal__body {
  padding-top: 52px;
}
</style>
