<template>
  <div class="communication-block">
    <Frame
      :image="$_getContentImage(fetchedData[0].image, 'image-card')"
      class="communication-block__bg"
    />

    <div class="communication-block__text">
      <Title
        :dark-mode="true"
        tag="h4"
        class="communication-block__text__title mb-m"
      >
        {{ fetchedData[0].title }}
      </Title>

      <WysiwygBlock class="communication-block__text__content">
        {{ fetchedData[0].body }}
      </WysiwygBlock>

      <Link
        :href="fetchedData[0].link"
        :external="isExternalLink(fetchedData[0].link)"
        :icon="null"
        :hover-decoration-disabled="true"
        :style="{ margin: 'auto' }"
      >
        <Button type="secondary" appearance="secondary" class="my-l">
          {{ fetchedData[0].link_title }}
        </Button>
      </Link>
    </div>

    <edit-content-btn-ui
      v-if="getCheckedData(fetchedData, [0, 'admin', 'permission', 'update'])"
      :edition-link="{
        name: 'Edition',
        params: {
          content: fetchedData[0].content_type,
          uuid: fetchedData[0].uuid
        }
      }"
    />
  </div>
</template>

<script>
import { Title } from 'inside-collection/atoms'
import { Button, Link } from 'inside-collection/components'

import Frame from '@inside-commons/components/lib/Frame'

import { isExternal } from 'inside-collection/helpers'

import WysiwygBlock from '@inside-wysiwyg/components/lib/WysiwygBlock'

export default {
  name: 'HomeCommunication',
  components: { Title, Button, Link, Frame, WysiwygBlock },
  props: {
    fetchedData: {
      type: Array
    }
  },
  methods: {
    isExternalLink(link) {
      return isExternal(link)
    }
  }
}
</script>
