<template>
  <Block :title="$_tr('title')" title-tag="h5" class="mb-xl">
    <component-listing
      id="related-projects-listing"
      direction="vertical"
      :static-data="projects"
    >
      <template #default="{ item }">
        <CardImage
          v-bind="item"
          :key="item.uuid"
          :image="$_getContentImage(item.main_image, 'image-card')"
          @click.native="handleClick(item)"
        />
      </template>
    </component-listing>
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'

import { CardImage } from 'inside-collection/components'

import { formatHref } from '@inside-library/helpers/Langs'

export default {
  name: 'RelatedProjects',
  $_i18nRootPath: 'customs.PROJECTS.relatedProjects',
  components: {
    Block,
    CardImage
  },
  props: {
    projects: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleClick(item) {
      this.$router.push(
        formatHref(
          { name: 'ProjectPage', params: { slug: item.slug[0] } },
          this.$_currentLang
        )
      )
    }
  }
}
</script>
