<template>
  <div class="mery-pages">
    <Banner :static-data="fetchedData">
      <template #footer>
        <div class="mery-pages-chapo">
          <Link
            :href="
              fetchedData.mery_categories.data[0].slug[0]
                ? {
                  name: 'MeryCategoriesPage',
                  params: {
                    slug: fetchedData.mery_categories.data[0].slug[0]
                  }
                }
                : {
                  name: 'MeryPage'
                }
            "
            :inline="false"
          >
            <div class="mery-pages-image">
              <img
                v-if="
                  fetchedData.mery_pages_icon &&
                    fetchedData.mery_pages_icon !== ''
                "
                :src="
                  $_getContentImage(fetchedData.mery_pages_icon, 'image-card')
                "
                :alt="fetchedData.mery_categories.data[0].title"
              />
            </div>
          </Link>

          <BaseText v-if="fetchedData.chapo">
            {{ fetchedData.chapo }}
          </BaseText>
        </div>
      </template>
    </Banner>

    <TemplateContainer v-if="fetchedData.content" size="s">
      <ParagraphListing
        :heritedData="fetchedData.content"
        :heritedOptions="{ template: true }"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import { Link } from 'inside-collection/components'
import { BaseText } from 'inside-collection/atoms'

import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

import ParagraphListing from '@inside-library/components/listing/ParagraphListing'

export default {
  name: 'MeryPages',
  components: {
    Banner,
    Link,
    BaseText,
    TemplateContainer,
    ParagraphListing
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss">
.mery-pages {
  .title {
    margin-bottom: var(--spacing-l);
  }

  &-chapo {
    display: flex;
    align-items: center;
  }

  &-image {
    width: 70px;
    height: 70px;
    margin-right: var(--spacing-l);
  }
}
</style>
